jQuery CSS Customizable Scrollbar

This plugin is the wrapper for standard scroll mechanism. It means that it supports all native scroll events plus allows you to customize scroll with CSS.

DEMO

DOWNLOAD

Features

How to use

It's quite simple:
  1. Include jquery.scrollbar.js into your page
  2. Include styles for scrollbar jquery.scrollbar.css
  3. Initialize scrollbars
            $(document).ready(function(){
                $('.scrollable').scrollbar(options);
            });

Options

autoScrollSize
true, false
Automatically calculate scrollbar size. Use "false" to set scrollbar size via CSS
disableBodyScroll
true, false
If option enabled & mouse is over scrollable container, main page won't be scrolled
duration
number of ms
Number of ms for scroll option
ignoreMobile
true, false
Disable custom scrollbars on mobile devices
scrollStep
offset in px
Scroll value when click on scrollbar arrows
showArrows
true, false
Add class "scroll-element_show-arrows" to scrollbar to show arrows via CSS
type
advanced, simple
Scrollbar HTML structure. Use scrollx/scrolly options to define own HTML structure
scrollx
jQuery object, jQuery selector, HTML string
You can make any element on your page to be scrollbar for you container
scrolly
jQuery object, jQuery selector, HTML string
You can make any element on your page to be scrollbar for you container
onInit
function
Callback function is called every time scrollbar is (re)initialized
onDestroy
function
Callback function is called when custom scrollbar is removed

Limitations