2

我设置了 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;
}
<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>

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

4

1 回答 1

0

只想到以下 CSS 属性，尽管它并没有提供太多的自定义方式：

scroll-behavior: smooth;

在这个属性的 w3schools 页面上，有一些你可能也会感兴趣的 javascript 代码。向下滚动到那里的跨浏览器解决方案部分；它列出了一个使用 CSS 针对滚动位置的替代脚本animate，这将允许您完全控制滚动速度。

于 2021-12-28T00:57:43.480 回答