scrollbot.js | Creating Custom Scrollbar with Pure JavaScript

scrollbot.js is a pure JavaScript scorllbar library, it allows user to create some custom scrollbars for html container.

How to create a custom scrollbar using scrollbot.js?

1.Import scrollbot.js in your html page

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

2.Create a scrollable container for displaying scrollbar

<div class="scrollbot" id="demo">
     ...
</div>

You should notice: the html container should have a fixed height. Here is an example:

.scrollbot{
  width:400px;
  height:250px;
  box-shadow:1px 1px 6px -2px #000;
  margin:10px;
  display:inline-block;
  vertical-align:top;
  padding:3px 5px;
  background:#fff;
  text-align:left;
}

3.Create a Scrollbot instance with html element id

var normal = new scrollbot("#demo");

or set the width of the custom scrollbar

var normal = new scrollbot("#demo", 20); // width 20px

4.You also can set the style for the scrollbar using setStyle() method

// .setStyle(scrollbar,scrollbarholder)
var styled = new scrollbot("#styled").setStyle({
  "border-radius":0,
  "background-color":"#ff5722"
},{
  "border-radius":0,
  "background-color":"#ff9800"
})

5.You also can use a function to process the event when scrolling

var callBack = new scrollbot("#callback").onScroll(function);