Javascript Custom Scrollbar without jQuery

The “simplebar.js” is a vanilla Javascript Custom Scrollbar plugin that developed without touching the jQuery. It ensures the greate perform and work well with all major browsers.

The plugin allows you to create the custom horizontal or vertical scrollbar for content block. You can also implement this plugin with the body element.

The goal of the plugin to replace the browser’s default scrollbar with a custom stylish one without losing the performances.

Furthermore, it is a simple and lightweight plugin that offers native scroll. Another key thing, it is easy to use and cross-browser compatible.

Due to its extensive features, you can easily implement this custom scroll bar as a vertical in the content area.

The simple scrollbar is a standalone javascript library that appends a custom scrollbar to any content area or container.

It also works well with CSS overflow: auto property and keeps the native scroll behavior.

How to use Javascript Custom Scrollbar without jQuery

Install the SimpleBar and import it into your web project.

- Via npm npm install simplebar --save
- Via Yarn yarn add simplebar
- Via <script> tag

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

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

After that, you need to define the HTML structure. We will define a simple div element and add a unique ID. Moreover, you make sure to add the “data-simplebar” attribute to your scrollable container.

<div data-simplebar id="demo">
  content here
</div>

The Javascript

Lastly, we need to initialize the Simplebar manually by defining the ID

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

To config, the plugin, 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
})

Advanced Options for Custom Scrollbar

The following are some advanced configuration options to customize the scrollbar.

new SimpleBar(el), {
	autoHide : true,
});

new SimpleBar(el), {
	scrollbarMinSize : 10,
});

new SimpleBar(el), {
	classNames : classNames: {   
      // defaults   
      content: 'simplebar-content',
      scrollContent: 'simplebar-scroll-content',
      scrollbar: 'simplebar-scrollbar',
      track: 'simplebar-track'
      },
});

new SimpleBar(el), {
	forceVisible : false,
});

new SimpleBar(el), {
	direction : 'ltr',
});