如何让我的滚动像所附网站一样流畅？

Question

目前，我已经尝试将

 html {scroll-behavior: smooth;}

添加到我的全局样式文件中，但它远没有达到此处提供的平滑滚动的程度：https://fireart.studio/blog/20-best-futuristic-website-启发你的例子/

它似乎有某种动力，因此不像常规滚动条那样不稳定。我还注意到，与我在常规滚动条上尽可能快地滚动相比，它的速度相当适中，这可能是它感觉如此流畅的第二个因素。

我浏览了一些其他答案，但无法找到如何像这样专门进行滚动。我很感激任何建议/见解。

Answer 1

嘿乔伊几年前我也有过类似的问题返回顶部按钮行为

对于滚动行为，是的，典型的平滑滚动不会改变其动量，它更加“线性”，您的目标是拥有更多惯性的滚动。如果您想仅使用普通 JavaScript 来构建它，您可以使用以下内容：

window.addEventListener('wheel', (event) => {
  let scrollAmount = event.deltaY;
  let scrollInterval = setInterval(() => {
    window.scrollBy(0, scrollAmount);
    scrollAmount *= 0.8; // Adjust the deceleration factor as needed
    if (Math.abs(scrollAmount) < 1) {
      clearInterval(scrollInterval);
    }
  }, 10);
});

另一种选择是使用 javascript 库，例如 Fluid Scroll

或平滑滚动