Performant Custom Scrollbar JavaScript Library – SimpleBar

Category: Javascript , Recommended | October 16, 2018
Author: Grsmto
Views Total: 1,383
Official Page: Go to website
Last Update: October 16, 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,
    forceVisible: false,
    classNames: {
      content: 'simplebar-content',
      scrollContent: 'simplebar-scroll-content',
      scrollbar: 'simplebar-scrollbar',
      track: 'simplebar-track',
      visible: 'visible',
      horizontal: 'horizontal',
      vertical: 'vertical'
    },
    scrollbarMinSize: 25,
    scrollbarMaxSize: 0,
    direction: 'ltr',
    timeout: 1000
})

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:

10/16/2018

  • Add ‘visible’, ‘horizontal’ and ‘vertical’ classnames to options

08/19/2018

  • Fix handle not being draggable on IE/Edge

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