Create Custom Scrollbars With Pure JavaScript – scrollBot

scrollBot is a vanilla JavaScript library that appends a highly customizable scrollbar to your scrollable container.

How to use it:

Put the scrollBot’s script in the document and we’re ready to go.

<script src="scrollbot.js"></script>

Create a new scrollBot object and specify the target container.

var myDemo = new scrollbot(".container", WIDTH);

Apply your own CSS styles to the custom scrollbar.

var myDemo = new scrollbot(".container",10).setStyle({
      "background":"#202020",
      "z-index":"2"
    },{
      "background":"rgba(0,0,0,0)"
    });

Scroll to a specific position within the scrollable container.

myDemo.setScroll(scrollPosition,duration)

Execute a custom function when scrolling.

myDemo.onScroll(function)

Refresh the scrollbar that is useful in window resize.

myDemo.refresh()