如何像这些网站一样进行慢速滚动

Question

在一些网站上，我可以看到平滑缓慢的滚动。我一直在寻找用于react或vue的插件。我基本上想学习如何使用香草Javascript。你也可以建议插件库和任何你想要的。但我想知道如何在纯香草js中做到这一点。我想学习控制滚动速度。

以下是网站：

1. https://nana-asia.com/
2. https://pelizzari.com/en
3. https://loerarchitecten.com/en/projects/republica-short-guy

你可以告诉我这些网站在使用什么，也可以告诉我如何使用纯js。

Answer 1

请看下面的演示，可能会有所帮助。

https://css-tricks.com/snippets/jquery/smooth-scrolling/

还有一个名为"平滑滚动"的开源库，在下面粘贴链接。它们可以作为一个起点。

https://github.com/cferdinandi/smooth-scroll

希望能有所帮助。

Answer 2

一种方法：

• 抓住鼠标滚轮和触摸事件，防止它们的原始行为。

• 检测触摸事件的方向和速度或鼠标滚轮事件的滚动量

• 使用事件值并将其映射到所需的滚动级别

• 将CSS翻译应用于页面内容

Answer 3

如果你想让页面像第一个一样平滑滚动，这里是一个很好的插件https://jokertattoo.co.uk/js/SmoothScroll.js你可以篡改这些值，直到你得到你想要的结果：

frameRate        : 150, // [Hz]
animationTime    : 2000, // [px]
stepSize         : 150, // [px]

下面是它的实际操作演示：https://ui-unicorn.co.uk/my-cv/