Javascript滚动动画

Question

我正在用尽可能多的 css 在 wordpress 上开发一个电子商务网站，因为我对Javascript经验很少。 不过，我访问了这个网站，并对“软滚动”动画印象深刻，我唯一能描述它的方式是浏览器相当于软关闭厨房抽屉。

https://mouthwash.co/news/an-introduction-to-mouthwash

我在源代码中注意到他们使用Javascript ，想知道是否有人可以阐明他们是如何实现这种滚动效果的。 我在我的样式表中包含了以下 css，但它并不完全相同。

html {scroll-behavior: smooth;}

Answer 1

如果您检查 body 元素的样式，您会发现它们使用了overflow: hidden; 这将禁用浏览器的本机滚动。
相反，在article-item copy media-content元素上，他们使用translateY来实现滚动效果。
这种类型的效果是使用平滑滚动javascript 插件实现的。
我用的是这个

Answer 2

tympanus.net/教程/SmoothScrollAnimations

正是我所描述的，如果其他人感兴趣，还有一个教程。