使用 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 使得滚动容器和图像容器的事情变得更加容易。