Smooth and Cross-Browser Scrollbar In JavaScript | smooth-scrollbar

Smooth Scrollbar is a JavaScript plugin that allows you to customize high-performance scrollbars across browsers. Translate3d is used to perform momentum-based scrolling (also known as inertial scrolling) on modern browsers.

By using the flexible plugin system, we can easily redesign the slider as we want. This is the slider accessory you ever dreamed of!

How to make use of it:

Install the Smooth Scrollbar through NPM.

npm install smooth-scrollbar --save

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

import Scrollbar from 'smooth-scrollbar';


Possible choices 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;

Cross-browser Smooth Scrollbar In Vanilla JavaScript, perfect scrollbar smooth scrolling, Smooth Scrollbar Plugin/Github

See Demo And Download

Official Website(idiotWu): Click Here

This superior jQuery/javascript plugin is developed by idiotWu. For extra Advanced Usage, please go to the official website.