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
$ 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
</section>
<!-- Or -->
<section data-scrollbar>
  Scrollable content goes here
</section>
<!-- Or -->
<scrollbar>
  Scrollable content goes here
</scrollbar>

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.

Scrollbar.initAll();

Possible options with default values.

Scrollbar.initAll({
  // 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:
Scrollbar.getAll()
// Remove scrollbar on the given element, same as scrollbar#destroy() method.
Scrollbar.destroy( element )
// Remove all scrollbar instances.
Scrollbar.destroyAll()
// Attaches plugins to scrollbars.
Scrollbar.use()
// Attaches default style sheets to current document. 
Scrollbar.attachStyle()
// Removes default styles from current document. 
Scrollbar.detachStyle()

Changelog:

v8.8.4 (06/06/2023)

• utils/debounce: fix timer scheduling

v8.8.3 (04/24/2023)

• refactor(lodash): simplify clamp and debounce