Pure JavaScript Custom Scrollbar Plugin – scrollbot

Preview:

Description:

scrollbot is a standalone JavaScript library that adds a highly customizable scrollbar to the desired scrollable container.

How to use it:

Create a scrollable container:

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

The scrollable area must have a fixed height.

.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;
}

Initialize the scrollbot on the scrollable container to create a default scrollbar.

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

Adjust the width of the custom scrollbar.

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

Set the style of the scrollbar.

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

Execute an event while scrolling.

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

Changelog:

02/07/2019

• v3.0.0