Press "Enter" to skip to content

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

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

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

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

Changelog:

v8.5.3 (10/16/2020)

  • Bugfixed: occasions: ignored try and cancel an occasion with cancelable=false.

v8.5.2 (03/23/2020)

  • Fixed: webpack: make UMD construct obtainable on each browser and Node.js.

v8.5.1 (01/24/2020)

  • Fixed: keyboard: forestall keyboard navigating on choose subject.

v8.3.1 (10/10/2018)

  • scrollTo: cancel earlier animation

See Demo And Download

Official Website(idiotWu): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *