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.

scrollbot.js - Creating Custom Scrollbar with Pure JavaScript

AuthorLinksMade withLast update
akZhyOffice HomeJavaScriptSep 15, 2022

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">

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

  box-shadow:1px 1px 6px -2px #000;
  padding:3px 5px;

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({

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *