Custom Scrollbar for all Browsers with JavaScript CSS

Custom Scrollbar for all Browsers with JavaScript CSS
Code Snippet:simplebar
Author: Grsmto
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 9,397
License: MIT
Edit Code online: View on CodePen
Read More

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 in Vanilla JavaScript, jQuery, React Js, Angular and Vue JS. Similarly, it is compatible with popular frameworks like Bootstrap and Materialize CSS etc.

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.

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',
});

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...