JavaScript中实现带有摩擦和惯性的滚动

Question

自去年（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库可以帮助我完成这一点）。我正在寻找的是用户开始向下滚动网站时所经历的“摩擦力”和“动量”。

- Fausto German

---

嗨，Fausto，这些链接可能会对你有所帮助 :) [1]: http://scrollmagic.io/ [2]: https://michalsnik.github.io/aos/ - vipul kumawat

嗨，vipul kumawat，感谢你的评论。我不是在寻找滚动时内容的动画效果，我是在寻找用户在向下滚动网站时所体验到的阻力和动量。我将对帖子进行编辑以澄清这一点。 - Fausto German

也许这个链接可以帮到你：https://codepen.io/satya164/pen/njirJ - Marco

Answer 1

我找到了自己问题的解决方案！

我进行了更深入的研究，找到了一个叫做Smooth Scrollbar的插件，正好可以满足我的需求。

访问 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
            }
        });

    }
}

- Fausto German