如何为滚动容器的左右两侧添加渐变模糊效果？

我想给类名为boxes的横向滚动容器左右两侧添加渐隐模糊效果，容器内的box元素可通过backwards和forwards按钮滚动查看。目标是让容器远端边缘的内容逐渐过渡到不可见，示例效果为边缘自然的透明渐变，而我当前的效果过渡生硬。

示例效果：

当前效果：

现有代码 #

HTML代码 #

<div class="boxes-container">
    <div class="boxes">
        <!-- box 1 -->
        <div class="box">
            <div class="img-container">
                <img src="https://a0.muscache.com/pictures/b6005f78-45e6-403a-bc1d-3351ae83d149.jpg" alt="">
            </div>
            <h6>Why host on Airbnb?</h6>
            <p>Hosts reveal what they love about sharing their space on Airbnb.</p>
        </div>
        <!-- box 2 -->
        <div class="box">
            <div class="img-container">
                <img src="https://a0.muscache.com/pictures/9ac19f4a-a59c-47f9-8223-09120b52cd2d.jpg" alt="">
            </div>
            <h6>How to get started on Airbnb</h6>
            <p>From creating your listing to prepping your space, learn how to start hosting.</p>
        </div>
        <!-- box 3 -->
        <div class="box">
            <div class="img-container">
                <img src="https://a0.muscache.com/pictures/4d0cc0ed-ad85-4efd-b98e-386d22ab195a.jpg" alt="">
            </div>
            <h6>How to earn money on Airbnb</h6>
            <p>Here's what every Host needs to know about pricing and payouts.</p>
        </div>
        <!-- box 4 -->
        <div class="box">
            <div class="img-container">
                <img src="https://a0.muscache.com/pictures/4efaca33-ca90-4d94-a79b-381cf0179355.jpg" alt="">
            </div>
            <h6>Designing your space</h6>
            <p>Designing your space for guests can be a quick way to boost your bookings.</p>
        </div>
        <!-- box 5 -->
        <div class="box" id="last-box">
            <div class="img-container">
                <img src="https://a0.muscache.com/pictures/3cea79b0-79c3-4604-8fd9-7ef5cee4aa42.jpg" alt="">
            </div>
            <h6>Secrets from a seasoned Superhost</h6>
            <p>Superhost Nikki shares her tips, from setting up to standing out.</p>
        </div>
    </div>
</div>

CSS代码 #

.boxes-container {
    margin-top: 2rem;
    width: 100%;
    position: relative;
}

.boxes {
    display: flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    // border: 2px solid red;
    position: relative;

    &::before, &::after {
        content: '';
        position: absolute;
        top: 0;
        width: 2rem;
        height: 100%;
    }

    &::before {
        box-shadow: 50px 0 50px #fff inset;
        left: 0;
    }

    &::after {
        box-shadow: -50px 0 50px #fff inset;
        // box-shadow: -80px 0 #fff inset;
        right: 0;
    }
    
    &::-webkit-scrollbar {display: none}

    .box {
        @include flexCenter(column);
        align-items: flex-start;
        gap: 1rem;
        width: 332px;
        max-width: 332px;
        cursor: pointer;
        margin-right: 2rem;
        // background-color: green;

        &#last-box {
            padding-right: 2rem;
        }

        .img-container {
            
            img {
                width: 322px;
                max-width: 322px;
                height: 200px;
                object-fit: cover;
                border-radius: 10px;
            }
        }

        h6 {
            font-size: 18px;
        }

        p {
            font-size: 14.5px;
            font-weight: lighter;
            letter-spacing: 0.1px;
        }
    }
}

解决方案 #

你当前用box-shadow实现的过渡效果不够自然，更合适的方式是用线性渐变背景模拟渐隐效果，同时调整伪元素的层级和容器布局，让过渡更自然。

修改后的CSS代码 #

.boxes-container {
    margin-top: 2rem;
    width: 100%;
    position: relative;
    overflow: hidden; /* 限制伪元素范围 */
}

.boxes {
    display: flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    position: relative;
    padding: 0 2rem; /* 避免渐变遮挡边缘内容 */

    &::-webkit-scrollbar {display: none}

    .box {
        @include flexCenter(column);
        align-items: flex-start;
        gap: 1rem;
        width: 332px;
        max-width: 332px;
        cursor: pointer;
        margin-right: 2rem;

        &:last-child {
            margin-right: 0; /* 移除最后一个元素的右侧margin，配合容器padding */
        }

        .img-container {
            
            img {
                width: 322px;
                max-width: 322px;
                height: 200px;
                object-fit: cover;
                border-radius: 10px;
            }
        }

        h6 {
            font-size: 18px;
        }

        p {
            font-size: 14.5px;
            font-weight: lighter;
            letter-spacing: 0.1px;
        }
    }
}

/* 将渐变伪元素移到容器上，避免随内容滚动 */
.boxes-container::before, .boxes-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 4rem;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 不干扰下方交互 */
}

.boxes-container::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent); /* 左到右渐变 */
}

.boxes-container::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent); /* 右到左渐变 */
}

关键改动说明 #

1. 容器布局调整：给.boxes-container添加overflow:hidden，确保渐变伪元素不会超出容器范围；给.boxes添加左右padding，防止渐变完全遮挡边缘内容。
2. 替换渐变实现：用linear-gradient替代box-shadow，从容器背景色（#fff）过渡到透明，实现更自然的渐隐效果。
3. 伪元素层级优化：将伪元素移到.boxes-container上，避免随滚动内容移动；添加pointer-events: none，保证渐变层不影响下方按钮和内容的点击交互。
4. 内容间距调整：移除最后一个box的padding-right，改用:last-child设置margin-right:0，配合容器padding保证布局一致性。

进阶优化（可选） #

如果需要在滚动到最左/最右时隐藏对应侧的渐变，可通过JS监听滚动事件实现：

const boxes = document.querySelector('.boxes');
const container = document.querySelector('.boxes-container');
const leftGradient = container.querySelector(':before');
const rightGradient = container.querySelector(':after');

boxes.addEventListener('scroll', () => {
    // 滚动到最左侧时隐藏左渐变
    leftGradient.style.opacity = boxes.scrollLeft <= 0 ? '0' : '1';
    // 滚动到最右侧时隐藏右渐变
    rightGradient.style.opacity = boxes.scrollLeft >= boxes.scrollWidth - boxes.clientWidth ? '0' : '1';
});

内容的提问来源于stack exchange，提问作者tices