使用 css 滚动捕捉，如何使图像不在视图中模糊（不透明）？

Question

body {  overflow-y: hidden;}.slides {  scroll-snap-type: x mandatory;  -webkit-overflow-scrolling: touch;  display: flex;  overflow-x: scroll;}section {  height: 100vh;  min-width: 80vw;  display: flex;  align-items: center;  justify-content: center;  background-repeat: no-repeat;  background-size: cover;  scroll-snap-align: start;}.section-1{background-color: blue;}.section-2{background-color: yellow;}.section-3{background-color: green;}.section-4{background-color: orange;}<main class="slides">  <section class="section-1">    <h2>Scroll right to see it in action</h2>  </section>  <section class="section-2">    <h3>this and that</h3>  </section>  <section class="section-3">    <h2>help</h2>  </section>  <section class="section-4">    <h3>please</h3>  </section></main>我正在制作一个水平滚动的轮播。在这个 div 中有图像，我正在使用 css 滚动捕捉 where scroll-snap-align: start。列表中的下一个图像（右侧不可见的图像）需要比当前视图中的图像更不透明。这就是我想要的样子（旋转木马的图片）另外，当我在这里时，是否有任何人可以帮助无限滚动，所以图像又从头开始了？

Answer 1

答案是在滚动容器上使用事件监听器。根据滚动容器的 leftscroll 值，我们可以将图像容器（包裹放置在滚动容器内的图像）的不透明度样式设置为较低的值（模糊）或设置回 1（可见）。

在 React 中使用 refs 使得滚动容器和图像容器的事情变得更加容易。