Created on

14 Oct 2018

Updated on

20 Jan 2021

Scrollbot is a javascript plugin that can create highly customizable scrollbars. Scrollbot works by hiding the natural scrollbars, ie other plugins, and scripts that use the scroll() function can work fine with the scrollbot.

Basic Usage

Download the files from GitHub

Include the script.

<script src="scrollbot.min.js" type="text/javascript"></script>

and call the function

var custom = new Scrollbot("#element",width);

This creates a custom scrollbar on the element with the default styling. If no width is specified, the default width of 5px will is used.


setStyle(scrollbar, scrollbartrack) 

It is used to add styles to the scrollbar and scrollbar track respectively.

Example :


.setScroll(scrollPosition, duration) 

It is used to scroll to the given position of the website. duration (in ms) is used to specify the amount of time taken for the scrolling.


It is used to refresh the scrollbar height in case of height change. It is called automatically in an interval.


It is used to execute a function when scrolling occurs.


It is used to remove all custom scroll properties and show the default scrollbar.


.scrollBar can be used to fetch the scrollbar element

.scrollBarHolder is used to fetch the scrollbar track element

.scrollElement  is used to fetch the element which actually scrolls, ie any script that uses scroll function must be applied on this element.


Live demo below. View it here.


Post a comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.