Custom Scrollbar for all Browsers with JavaScript CSS

The simplebar is a powerful and cross-browser JavaScript library to create custom scrollbar for all browsers. This library replace default browser scrollbar with CSS styled custom-scrollbar. However, the scrolling behavior remains native. Furthermore, simlebar.js library can be used with pure JavaScript, jQuery, React Js, Angular and Vue JS. On the other hand, it is also compatible with other popular frameworks like Bootstrap and Materialize CSS etc.

In this tutorial, we’ll create a simple custom scrollbar box using simplebar, pure JavaScript and CSS.

Plugin Overview and Preview

Library: simplebar
Author: Grsmto
Category: Layout
Published: November 7, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 65 KB
Dependencies: No dependency!
Last Modified:
MIT
86 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

How to Create Custom Scrollbar for all Browsers

1. First of all download this web project, include plugin assets (from downloaded directory) in your HTML document.

<!-- simplebar CSS -->
<link rel="stylesheet" href="css/simplebar.css">
<!-- simplebar JS -->
<script src="js/simplebar.min.js"></script>

2. After that, create HTML div element with a unique id and put your contents in it.
You can place anything (like images, videos, iframes, or HTML elements).

<div class="box" id="myBox">
Put your contents here.
</div>

3. Style your box with some CSS. The height property is necessary to show scrollbar.

        .box{
            height: 300px;
            border: 2px solid #ddd;
            margin: 10px;
            padding: 10px;
        }

4. Now, its time to show the scrollbar. So, call the simpleBar with that box’s id.

<script>
var box = document.getElementById('myBox')
new SimpleBar(box);
<\script>

With the help of this library, you can create both horizontal and vertical scrollbars. Similarly, you can also fully customize scrollbar color, width, size and track etc.

For more advance usage, please check the Configuration Options tab.

Advance Configuration Options for Custom Scrollbar

The following are some advanced configuration options to customize scrollbar.

Option Default Type Description
autoHide true Boolean Automatically hides the scrollbar if user is not scrolling.

Example:

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

Example:

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

Example:

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

Example:

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

Example:

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

Changelog

7/11/2019

  • Update to latest simplebar version.

There are no reviews yet. Be the first one to write one.

Submit Your Review