Cross-browser Smooth Scrollbar In Vanilla JavaScript – Smooth Scrollbar

Category: Javascript , Recommended | October 16, 2020
Author:idiotWu
Views Total:1,835 views
Official Page:Go to website
Last Update:October 16, 2020
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.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