是否可以调整 css 滚动捕捉速度/缓动？

Question

是否可以调整 css 滚动捕捉速度/缓动？

Eth*_*dge 8 html javascript css asp.net-core scroll-snap

我设置了 CSS Scroll Snap，如果可能的话，我想对其实施缓动。一旦它捕捉到一个点，它就会滚动得太快。有没有办法使用 CSS、JavaScript 或外部动画库来调整滚动捕捉速度/缓动？我的项目是 ASP.NET Core 5 MVC Web 应用程序。

html, body {
  margin: 0;
  padding: 0;
  scroll-snap-type: y proximity;
}

.landing-page-content {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-page-content h1 {
  color: black;
  margin: 0;
}

.s1 {
  background-color: red;
}

.s2 {
  background-color: yellow;
}

.s3 {
  background-color: blue;
}

.s4 {
  background-color: green;
}

.background-image {
  background-image: url(..pathToImage);
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 100vw;
  background-repeat: no-repeat;
  z-index: -1;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="background-image"></div>
  <section class="landing-page-content s1">
    <h1>Section One</h1>
  </section>
  <section class="landing-page-content s2">
    <h1>Section Two</h1>
  </section>
  <section class="landing-page-content s3">
    <h1>Section Three</h1>
  </section>
  <section class="landing-page-content s4">
    <h1>Section Four</h1>
  </section>
</body>

Run Code Online (Sandbox Code Playgroud)

我建议扩展该代码片段以更好地查看效果。

Answer 1

dbz*_*299 1

不，CSS 滚动捕捉属性不允许这样做。您需要将触摸事件与 JavaScript 结合使用。例如，如果您有一个图像轮播，您将使用translate3d 来移动它，并且您将拥有一个缓动的CSS 属性。不过，您必须编写自己的逻辑，以根据用户在该区域中滑动的方式来决定何时启动。

归档时间：	3 年，11 月前
查看次数：	12248 次
最近记录：	2 年，2 月前