Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Category: Javascript , Recommended | October 16, 2020
Views Total:1,965 views
Official Page:Go to website
Last Update:October 16, 2020


Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar


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';

Possible options to customize the Smooth 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.
  renderByPixels = true;
   * Keep scrollbar tracks visible
  alwaysShowTracks = false;
   * Set to `true` to allow outer scrollbars continue scrolling
   * when current scrollbar reaches edge.
  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;


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

You Might Be Interested In:

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

Leave a Reply