This javascript scrollbar plugin allows users to hides native scrollbars, and provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
If you hate ugly and space consuming scrollbars then this plugin is perfect for your next project. There are many more plugins available for making the Simple Custom Scrollbar but this one comes with some awesome features.
If we talk about the features, It supports the wide range of browser, fully responsive and works well with all kind of devices.
The other great features are, it supports the Textarea an iframe as well. Not only this but you can implement this plugin with div for the content area.
Features of Scrollbars
- It is a simple, powerful and good documented API.
- Provide you with a high level of browser compatibility (IE8+, Safari6+, Firefox, Opera, Chrome and Edge).
- Developed using the most recent technologies to ensure maximum efficiency and performance on newer browsers.
- Can be used without any dependencies or with jQuery.
- Automatic update detection – after the initialization you don’t have to worry about updating.
- Extremely powerful scroll method with features like animations, relative coordinates, scrollIntoView and more.
- Mouse and touch support.
- Textarea and Body support.
- RTL Direction support. (with normalization)
- Simple and effective scrollbar-styling.
- Sophisticated extension system.
How to Make Custom Scrollbar with Javascript
To implement it on your website. You need to make sure to load the CSS files before the Js files to prevent unexpected any bugs.
Load your CSS file(s) before the JS file(s), to prevent unexpected bugs.
<!-- Plugin CSS --> <link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/> <!-- Plugin JS --> <script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
If you are using the jQuery version, include jQuery before the plugin and use jquery.overlayScrollbars.js
<!-- Plugin CSS --> <link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/> <!-- jQuery JS --> <script type="text/javascript" src="path/to/jquery.js"></script> <!-- Plugin JS --> <script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>
Javascript
After adding the Javascript and Stylesheet files. Now its time to Initialize the plugin and you can do it as below example.
document.addEventListener("DOMContentLoaded", function() {
//The first argument are the elements to which the plugin shall be initialized
//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll('body'), { });
});To implement different theme and to customize it as per your need. You can do this way.
document.addEventListener("DOMContentLoaded", function() {
OverlayScrollbars(document.getElementById('os-theme-light'), {
className : "os-theme-light theme-container-content",
resize : "both",
sizeAutoCapable : true,
paddingAbsolute : true
});
});If you want to use the Jquery version then you need to initialization it like this way.
$(function() {
//The passed argument has to be at least a empty object or a object with your desired options
$('body').overlayScrollbars({ });
});To make the scrollbar look like our demo then you can use the HTML like below example. You can customize it as you want.
<div class="theme-container">
<div class="theme-container-caption">os-theme-dark</div>
<div class="box" id="os-theme-round-dark">
.... content goes here .....
</div>
<div class="theme-container-bottom">built-in</div>
</div>