A simple skinnable scrollbar for web
- 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
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();
You can view a demo here
- Scroll buttons
- Scrolling with dragger
- Touch events