faded-scrollbar

A simple skinnable scrollbar for web

Features

• An easy to use custom scrollbar that works out of the box with a simple function invocation.
• Can be easily themed for any host application

How to Use

Include faded-scrollbar.min.js script file and fade-scrollbar.css stylesheet along with jQuery in the HTML page.

Set the dimensions (especially the height) of the element on which you want the scrollbar to appear.

Instantiate a scrollbar on the element as below:

scrollbar = new FadedScrollbar("#container");

When the content inside the element changes (addition or removal of content), just invoke refresh() on the scrollbar as

scrollbar.refresh();

When the scrollbar is no longer required, call a destroy() on the scrollbar and the original markup will be brought back.

scrollbar.destroy();

Demo

You can view a demo here

Dependency

• jQuery

To-do

• Scroll buttons
• Scrolling with dragger
• Touch events