Javascript Custom Scrollbar without jQuery

Category: Layout | August 10, 2018
javascript custom scrollbar without jquery
Author: Grsmto
Official Page: Go to Website
Last Update:November 22, 2019
License:MIT

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.

OptionDefaultTypeDescription
autoHidetrueBooleanAutomatically hides the scrollbar if the user is not scrolling.

Example:

new SimpleBar(el), {
	autoHide : true,
});
scrollbarMinSize10NumberIt defines the minimum width size of the scrollbar in pixels. Pass the number value (without px) to set custom width.

Example:

new SimpleBar(el), {
	scrollbarMinSize : 10,
});
classNamesShown in the example.StringThis object option is useful to set custom class names for each element of the scrollbar.

Example:

new SimpleBar(el), {
	classNames : classNames: {   
      // defaults   
      content: 'simplebar-content',
      scrollContent: 'simplebar-scroll-content',
      scrollbar: 'simplebar-scrollbar',
      track: 'simplebar-track'
      },
});
forceVisiblefalseBooleanDecide weather to force element to show a scrollbar. By default, this option behaves “overflow: auto”. Possible Option is: true|’x’|’y’ (default to `false`).

Example:

new SimpleBar(el), {
	forceVisible : false,
});
direction‘ltr’StringDefine the CSS direction property for an element. If you are using “rtl” direction then you must use this option.

Example:

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

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.