时间戳

首页 > 解决方案 > 使用 css 滚动捕捉，如何使图像不在视图中模糊（不透明）？

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

问题描述

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。列表中的下一个图像（右侧不可见的图像）需要比当前视图中的图像更不透明。

这就是我想要的样子（旋转木马的图片）

另外，当我在这里时，是否有任何人可以帮助无限滚动，所以图像又从头开始了？

标签： javascripthtmlcss

解决方案

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

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

推荐阅读