Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Category: Javascript , Recommended | October 10, 2018
Author: idiotWu
Views Total: 2,307
Official Page: Go to website
Last Update: October 10, 2018
License: MIT

Preview:

Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Description:

The Smooth Scrollbar JavaScript library enables you to implement cross-browser, high performance, highly customizable scrollbars with smooth kinetic/momentum scrolling effects.

How to use it:

Install the Smooth Scrollbar via NPM.

npm install smooth-scrollbar --save

Import the Smooth Scrollbar into your project and initialize it as follows:

import Scrollbar from 'smooth-scrollbar';

Scrollbar.init(document.querySelector('#my-scrollbar'));

Possible options to customize the Smooth Scrollbar.

Scrollbar.init(document.querySelector('#my-scrollbar'),{
  /**
   * Momentum reduction damping factor, a float value between `(0, 1)`.
   * The lower the value is, the more smooth the scrolling will be
   * (also the more paint frames).
   */
  @range(0, 1)
  damping = 0.1;

  /**
   * Minimal size for scrollbar thumbs.
   */
  @range(0, Infinity)
  thumbMinSize = 20;

  /**
   * Render every frame in integer pixel values
   * set to `true` to improve scrolling performance.
   */
  @boolean
  renderByPixels = true;

  /**
   * Keep scrollbar tracks visible
   */
  @boolean
  alwaysShowTracks = false;

  /**
   * Set to `true` to allow outer scrollbars continue scrolling
   * when current scrollbar reaches edge.
   */
  @boolean
  continuousScrolling = true;

  /**
   * Delegate wheel events and touch events to the given element.
   * By default, the container element is used.
   * This option will be useful for dealing with fixed elements.
   */
  delegateTo: EventTarget | null = null;
});

Changelog:

v8.3.1 (10/10/2018)

  • scrollTo: cancel previous animation

You Might Be Interested In:


One thought on “Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Leave a Reply