Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

Category: Javascript , Others , Recommended | May 16, 2016
Author: idiotWu
Views Total: 909
Official Page: Go to website
Last Update: May 16, 2016
License: MIT

Preview:

Customizable Scrollbar With Smooth Scroll – smooth-scrollbar

Description:

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

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.

Scrollbar.initAll({

  // Scrolling speed
  speed: 1,

  // Scrolling friction from 0 to 100
  friction: 10,

  // 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'
  
});

API.

// 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()