Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Preview:

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.5.3 (10/16/2020)

• Bugfixed: events: ignored attempt to cancel an event with cancelable=false.

v8.5.2 (03/23/2020)

• Fixed: webpack: make UMD build available on both browsers and Node.js.

v8.5.1 (01/24/2020)

• Fixed: keyboard: prevent keyboard navigating on select field.

v8.3.1 (10/10/2018)

• scrollTo: cancel previous animation