在 JavaScript 中使用摩擦力和动量滚动答案

【问题标题】：Scroll with friction and momentum in JavaScript在 JavaScript 中使用摩擦力和动量滚动
【发布时间】：2019-02-22 04:23:49
【问题描述】：

自去年（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，这些链接可能会对您有所帮助:)。 [1]：scrollmagic.io [2]：michalsnik.github.io/aos
嗨 vipul kumawat，感谢您的评论。我不希望在滚动上为内容制作动画，我正在寻找用户在向下滚动网站时体验到的摩擦和动力。我将对帖子进行编辑以澄清这一点。
也许这可以帮助你：codepen.io/satya164/pen/njirJ

标签： javascript angular scroll user-experience

【解决方案1】：

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

我做了一些更深入的研究，发现了一个名为 Smooth Scrollbar 的插件，它完全可以满足我的需要。

Visit Smooth Scrollbar's Page

我使用 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
            }
        });

    }
}

【讨论】：