如何将 CSS 滚动阴影添加到水平滚动容器？

Question

我按照这个问题的答案并稍微改变了它，以便它可以在应该水平滚动的容器上工作。 目标是向容器的边缘添加linear-gradient ，并在容器滚动时使渐变保持在边缘。 当用户位于容器的最左侧时，左侧阴影不可见，右侧也是如此。 所以当用户在中间时，两个阴影都应该是可见的。

我使用了答案底部示例之一中的相同代码，并将其添加到容器的::after伪元素中。 我对所有的阴影使用了linear-gradients ，只是改变了background-attachment: local来scroll第二组渐变。

但是，当我尝试滚动浏览它时，水平并没有相同的效果。 当容器滚动时，渐变在同一个 position 中保持固定，并且只显示红色渐变。

我该如何解决？

 const boxesView = document.querySelector('.boxes') const boxes = document.querySelectorAll('.box') // btns const forwardBtn = document.querySelector('#forwards') const backBtn = document.querySelector('#backwards') boxSize = boxes[0].clientWidth forwardBtn.addEventListener('click', () => { boxesView.scrollBy(boxSize, 0) }) backBtn.addEventListener('click', () => { boxesView.scrollBy(-boxSize, 0) })

 .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; position: relative; }.boxes::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: linear-gradient(90deg, red 30%, white) left/100px 100% no-repeat local, linear-gradient(90deg, white, red 70%) right/100px 100% no-repeat local, linear-gradient(90deg, blue 30%, white) left/80px 100% no-repeat scroll, linear-gradient(90deg, white, blue 70%) right/80px 100% no-repeat scroll; /* Shadows */ background-attachment: local local scroll scroll; }.boxes::-webkit-scrollbar { display: none; }.boxes.box { display: flex; justify-content: center; align-items: center; flex-direction: column; align-items: flex-start; gap: 1rem; width: 332px; max-width: 332px; cursor: pointer; margin-right: 2rem; }.boxes.box#last-box { padding-right: 2rem; }.boxes.box.img-container img { width: 322px; max-width: 322px; height: 200px; -o-object-fit: cover; object-fit: cover; border-radius: 10px; }.boxes.box h6 { font-size: 18px; }.boxes.box p { font-size: 14.5px; font-weight: lighter; letter-spacing: 0.1px; }

 <button id="backwards">Back</button> <button id="forwards">Forwards</button> <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>