Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

Category: Javascript , Recommended | June 5, 2023
Views Total:2,383 views
Official Page:Go to website
Last Update:June 5, 2023


Customizable Scrollbar With Smooth Scroll – smooth-scrollbar


smooth-scrollbar is a JavaScript library used to create a customizable, performant scrollbar with smooth scrolling effects for scrollable content.

Installation & Download:

$ npm install smooth-scrollbar --save

How to use it:

Load the required ‘smooth-scrollbar.css’ and ‘smooth-scrollbar.js’ in the html page.

<link href="dist/smooth-scrollbar.css" rel="stylesheet">
<script src="dist/smooth-scrollbar.js"></script>

Create a scrollable area as follows:

<section scrollbar>
  Scrollable content goes here
<!-- Or -->
<section data-scrollbar>
  Scrollable content goes here
<!-- Or -->
  Scrollable content goes here

Make it scrollable when the inner content is larger than its parent container.

section {
  width: 500px;
  height: 300px;
  overflow: auto;

Append a custom scrollbar to the scrollable area.


Possible options with default values.

  // Momentum reduction damping factor, a float value between (0, 1)
  damping: .1
  // Minimal size for scrollbar thumb.
  thumbMinSize: 20,
  // Render scrolling by integer pixels
  renderByPixels: true,
  // Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. 
  // When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars.
  continuousScrolling: 'auto',
  // Keep scrollbar tracks always visible.
  alwaysShowTracks: false,
  // 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: null,
  // plugins
  plugins: {}

API methods.

// Init scrollbar on given element, and returns scrollbar instance
Scrollbar.init( element, [options] )
// Automatically init scrollbar on all elements refer to selector scrollbar, [scrollbar], [data-scrollbar], returns an array of scrollbars collection:
Scrollbar.initAll( [options] )
// Check if scrollbar exists on given element:
Scrollbar.has( element )
// Get scrollbar on the given element, if no scrollbar instance exsits, return undefined:
Scrollbar.get( element )
// Return an array that contains all scrollbar instances:
// Remove scrollbar on the given element, same as scrollbar#destroy() method.
Scrollbar.destroy( element )
// Remove all scrollbar instances.
// Attaches plugins to scrollbars.
// Attaches default style sheets to current document. 
// Removes default styles from current document. 


v8.8.4 (06/06/2023)

  • utils/debounce: fix timer scheduling

v8.8.3 (04/24/2023)

  • refactor(lodash): simplify clamp and debounce

You Might Be Interested In:

Leave a Reply