自去年(2018 年)以来,我看到许多网站使用某种版本的“软/平滑”人工滚动。我一直很想弄清楚它是如何工作的,但到目前为止运气不好。
可以从这些网站体验效果(只需向下滚动到网站即可感受体验): 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 库可以帮助我实现这一点)。我正在寻找的是用户开始向下滚动网站时体验到的“摩擦”和“动力”。
最佳答案
我找到了我自己问题的解决方案!!
我做了一些更深入的研究,发现了一个名为 Smooth Scrollbar 的插件,它完全可以满足我的需要。
我使用 Angular v7.2.5 实现它的方式,
import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
// Smooth Scrollbar
import Scrollbar from 'smooth-scrollbar';
import overscroll from 'smooth-scrollbar/plugins/overscroll';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
@ViewChild('contentCylinder') ContentCylinder: ElementRef;
constructor() {}
ngOnInit() {
// Adds the overscroll Plugin
Scrollbar.use(overscroll);
// Initializes the smooth scroll
const SmoothScroll = Scrollbar.init(this.ContentCylinder.nativeElement, {
damping: 0.03,
plugins: {
overscroll: true
}
});
}
}
关于javascript - 在 JavaScript 中使用摩擦力和动量滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54820035/