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

【问题标题】：Is it possible to adjust css scroll-snap speed/easing?是否可以调整 css 滚动捕捉速度/缓动？
【发布时间】：2022-01-26 18:56:19
【问题描述】：

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

我建议扩展 sn-p 以更好地查看效果。

【问题讨论】：

这对应该如何完成的总体布局没有帮助吗？...似乎相对简单css-tricks.com/practical-css-scroll-snapping我不确定您使用的.net是否与此问题相关跨度>
@ViaTech 除非我在文章中遗漏了某些内容，否则它会讨论设置特定的捕捉点，但没有说明如何调整实际滚动速度。我的问题是它的滚动速度比我想要的要快，所以我想在命中该快照点后应用某种缓动效果。

标签： javascript html css asp.net-core scroll-snap

【解决方案1】：

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

scroll-behavior: smooth;

在the w3schools page for this property 上，您可能还会发现一些有趣的javascript 代码。向下滚动到那里的跨浏览器解决方案部分；它列出了一个替代脚本，该脚本使用 CSS animate 对抗滚动位置，这将允许您完全控制滚动速度。

【讨论】：