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


Performant Custom Scrollbar JavaScript Library – SimpleBar


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 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
.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

// gets scroll element

// gets content element

// removes observer



  • Fix horizontal scrollbar missing same logic as vertical one


  • Force the scrollbar to be displayed when hovered;

v3.0.0beta (07/15/2018)

  • Update

Leave a Reply