自去年(2018)以来,我看到许多网站使用某个版本的“软/平滑”人造滚动效果。我一直很想弄清楚它是如何工作的,但迄今为止没有成功。
可以从这些网站体验到效果(只需向下滚动即可感受体验): https://stockdutchdesign.com/en/home/ 或 https://curenails.co/en-US/home 我一直在尝试的方法是禁用网站的滚动,并侦听 wheel 事件,然后使用 window.scrollTo() 手动滚动网站。
以下是我的Angular代码:
我在许多不同的方式下谷歌了这个问题,但都没有找到答案。很奇怪,每个人都在使用它,却没有人谈论它。
任何帮助都将不胜感激,提前致谢!
编辑(澄清): 我的目标不是使内容动画化,以便随着用户向下滚动网站而出现(有很多JS库可以帮助我完成这一点)。我正在寻找的是用户开始向下滚动网站时所经历的“摩擦力”和“动量”。
可以从这些网站体验到效果(只需向下滚动即可感受体验): https://stockdutchdesign.com/en/home/ 或 https://curenails.co/en-US/home 我一直在尝试的方法是禁用网站的滚动,并侦听 wheel 事件,然后使用 window.scrollTo() 手动滚动网站。
以下是我的Angular代码:
// Listens to the scroll of the website
@HostListener('window:wheel', ['$event'])
scroll_event($event) {
$event.preventDefault();
window.scrollTo(0, Math.E * 2 * this.scrollAmount);
// Scrolls up or down
if ($event.deltaY > 0) {
this.scrollAmount++;
} else {
this.scrollAmount--;
}
}
任何帮助都将不胜感激,提前致谢!
编辑(澄清): 我的目标不是使内容动画化,以便随着用户向下滚动网站而出现(有很多JS库可以帮助我完成这一点)。我正在寻找的是用户开始向下滚动网站时所经历的“摩擦力”和“动量”。