Прокрутка с трением и импульсом в JavaScript - PullRequest
Новая
       36

Прокрутка с трением и импульсом в JavaScript

0 голосов
/ 22 февраля 2019

С прошлого года (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, которые могут помочь мне в этом).То, что я ищу, - это «трение» и «импульс», которые испытывают пользователи, когда они начинают прокручивать сайт вниз.

1 Ответ

0 голосов
/ 02 марта 2019

Я нашел решение своего собственного вопроса !!

Я провел небольшое углубленное исследование и нашел плагин под названием 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
            }
        });

    }
}
...