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.

Methods

setStyle(scrollbar, scrollbartrack) 

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

Example :

custom.setStyle({
  'background':'#000',
  'border-radius':'20px'
},{
  'background':'#fff',
  'opacity':'.5'
})

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

.refresh()

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

.onScroll(function)

It is used to execute a function when scrolling occurs.

.destroy() 

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

Properties

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

Demo

Live demo below. View it here.