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',
});
|
Similar Code Snippets:
Generate Random Background Color JavaScript
Elastic Custom Cursor in Vanilla JavaScript
Emoji Spinner in Vanilla JavaScript
jQuery Parallax Scrolling Background Image
Emoji Animation on Scroll Using CSS
Touch Swipe Detection in Pure JavaScript
Smooth Scroll in Vanilla JS
Print div Content Using JavaScript Without Opening New Window
Card Flip Animation using JavaScript Code
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.