Performant Custom Scrollbar JavaScript Library – SimpleBar

Category: Javascript , Recommended | August 10, 2018
Author: Grsmto
Views Total: 638
Official Page: Go to website
Last Update: August 10, 2018
License: MIT

Preview:

Performant Custom Scrollbar JavaScript Library – SimpleBar

Description:

SimpleBar is a simple, standalone JavaScript library that appends a custom scrollbar to any scrollable container which has overflowing content. Works with CSS overflow: auto property and keeps the native scroll behavior.

How to use it:

Install the SimpleBar and import it into your web project.

# NPM
$ npm install simplebar --save
// ES 6
import SimpleBar from 'simpleBar';

Or directly include the SimpleBar’s JavaScript and CSS files on the html page.

<link href="dist/simplebar.css" rel="stylesheet">
<script src="dist/simplebar.js"></script>

Add the ‘data-simplebar’ attribute to your scrollable container and done.

<div data-simplebar id="demo">
  content here
</div>
.demo {
  height: 300px;
  width: 400px;
  overflow: hidden;
}

To initialize the Simplebar manually:

new SimpleBar(document.getElementById('demo'))

To config the Simplebar, override the options as shown below and pass the object as the second parameter to the ‘Simplebar’ function.

new SimpleBar(document.getElementById('demo'), {
    autoHide: true,
    classNames: {
      content: 'simplebar-content',
      scrollContent: 'simplebar-scroll-content',
      scrollbar: 'simplebar-scrollbar',
      track: 'simplebar-track'
    },
    scrollbarMinSize: 25
})

API methods.

myInstance = new SimpleBar(document.getElementById('demo'), {
  // options here
})

// recalculates the height/width of content
myInstance.recalculate();

// gets scroll element
myInstance.getScrollElement();

// gets content element
myInstance.getContentElement();

// removes observer
myInstance.removeObserver();

Changelog:

08/10/2018

  • Fix horizontal scrollbar missing same logic as vertical one

08/01/2018

  • Force the scrollbar to be displayed when hovered;

v3.0.0beta (07/15/2018)

  • Update

Leave a Reply