Snap scroll CSS在Chrome中太快/跳跃，但在其他地方工作得很好

Question

非常新的，但我有一个页面的部分，我有一个滚动捕捉功能，但当在chrome上查看的过渡是不顺利的，它从一个部分跳到另一个太快。有办法解决这个问题吗?

https://www.matthewjameswilson.com/

这是我使用的代码:

html {
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 50px 0 0 0;
}
section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
} 

Answer 1

你错过了在CSS上添加平滑属性scroll-behavior: smooth;

html {
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-padding: 50px 0 0 0;
scroll-behavior: smooth;
}

Answer 2

我刚刚遇到了这个问题，但我认为这个问题是当我们用鼠标滚动时，它滚动得非常快，这就是为什么它的行为像这样。试着用笔记本电脑或手机来滚动，它在chrome上也会像预期的那样工作。

Answer 3

scroll-behavior: smooth;

修复仅当点击<a>标签滚动时。一个问题是当用鼠标滚轮滚动时获得平滑的滚动。