Customizable and Touch-Enabled jQuery Scrollbar Plugin - Custom Scrollbar

Custom Scrollbar is a jQuery plugin for creating vertical and horizontal scrollbars for your containers. It is fully customizable through CSS and supports scrolling by mouse dragging, mouse wheel and keyboard.

See also:

• jQuery Plugin For Custom Scrollbar - scrollbox
• Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar
•  jQuery Custom Scrollbar Plugin - malihu
• Responsive Browser Scrollbar Replacement Plugin - ClassyScroll
• Facebook-like jQuery Scrollbar Plugin - slimScroll
• nanoScroller - Mac OS X Lion-Styled Scrollbars
• jQuery Custom Scrollbar Plugin with jQuery UI - acescroll
• Highly Customizable and Cross Browser Scrollbar Plugin With jQuery

Basic Usage:

1. Include the latest jQuery library and jQuery Custom Scrollbar on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../jquery.custom-scrollbar.js"></script>

2. Include required CSS to style your scrollbars

<link type="text/css" rel="stylesheet" href="../jquery.custom-scrollbar.css"/>

3. Create a container you want to apply a custom scrollbar to

<div id="vertical-scrollbar-demo" class="gray-skin demo">
...
</div>

4. Simply call the plugin

<script type="text/javascript">
    $(window).load(function () {
        $(".demo").customScrollbar();
    });
</script>

More Examples:

• Basic Demo
• Events Demo
• Nested Scrollbar Demo
• Resizing demo
• Scrolling Programmatically Demo
• Predefined skins Demo

Change log:

v0.5.5 (2013-10-07)

• Fixed thumb height and width
• Fixed mouse scrolling divergence

v0.5.2 (2013-08-13)

• fixes lower scroll speed on touch events

---

This awesome jQuery plugin is developed by mzubala. For more Advanced Usages, please check the demo page or visit the official website.