Scroll with friction and momentum in JavaScript

Question

Since last year (2018), I have seen many websites using some version of a "soft/smooth" artificial scrolling. I have been very intrigued to figure out how it works but no luck so far.

The effect can be experienced from these websites (Just scroll down into the website to feel the experience): https://stockdutchdesign.com/en/home/ or https://curenails.co/en-US/home

The way I have been trying to do it is by disabling the website's scroll, and listening to the wheel event, then, manually scrolling the website using window.scrollTo();

Here is my code using 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--;
  }
}

I have googled this question in many different flavors and have not found an answer. It's weird how everyone is using it, yet nobody is talking about it.

Any help is appreciated, thanks in advance!

EDIT (Clarification):
My goal is not to animate content to appear as the user scrolls down the website (There are plenty of JS libraries that would help me with that). The thing that I am looking for is the "friction" and "momentum" the user experiences as they begin to scroll down the website.

Answer 1

I found the solution to my own question!!

I did a little bit of a deeper research and I found a plugin called Smooth Scrollbar that does exactly what I needed.

Visit Smooth Scrollbar's Page

The way I implemented it using 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
            }
        });

    }
}