jQuery Scrollable is a plugin which allows your users to replace default scrollbars with a customisable one. The visual result is like Apple iPad and iPhone scrollbars.

  • Fully customisable with CSS
  • Support X and Y
  • Auto hide the scrollbars when the mouse is not over the content to scroll
  • Auto resize scrollbars on content change
  • Do not affect the original design layout
  • Nested scrollbars support

Demonstration

Horizontal scroll

Matterhorn

Vertical scroll

Redhead

Both directions scroll

Matterhorn

Custom CSS

Tiger

Installation

Upload all files from the jQuery Scrollable package to your server: Javascript and CSS.

jQuery Scrollable requires jQuery 1.8.2+ and jQueryUi 1.8.20+. In the example below I'm including both using the Google AJAX Libraries API. As an alternative you could download and host jQuery and jQuery UI yourself, but by including both using Google's AJAX Libraries API you don't have to worry about caching and bandwidth cost.

Add jQuery Scrollable below these libraries, the correct order of the javascript files is as in the example below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.20/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.scrollable.js"></script>
jQueryUi CSS is not required for jQuery Scrollable.

Add jquery.scrollable.css to your header.

<link rel="stylesheet" type="text/css" href="/js/jquery.scrollable.css" />

How to use

<div style="width:400px;height:300px" class="scroll">
    <div style="height: 600px; width: 600px"></div>
</div>

Add just after your div, the following script, you can also put it in a $(document).ready() function.

<script type="text/javascript">
    $('.scroll').scrollable();
</script>

Documentation

Configuration

OptionDefaultDescription
autoHidetrueAuto hide scrollbars
mouseWheeltrueEnable the support of the mouse wheel
mouseWheelMaxDelta30Max mouse wheel scrolling speed
transferScrollingtrue If this option set to false when the mouse wheel scrolling will come, for example, at the bottom of the box the parent scrolling will be interrupted while the mouse is hover the box.
onUpdatefunction(){}Tiggered when the content change

Download

Changelog

jQuery Scrollable 1.2 - 25 February 2015
 - Fix mouse scroll speed
 - Fix mouseover event
 - Add mouseWheelMaxDelta option
 - Add transferScrolling option

jQuery Scrollable 1.1 - 6 August 2014
 - Fix mouse scroll on lower speed

jQuery Scrollable 1.0 - 5 August 2014
 - Remove beta status
 - Fix body element selection
 - Fix speed of mouse wheel
 - Fix mouse wheel nested behavior
 - Fix scrollbar display when drag outside the box
 - Fix mouse wheel when scrolling is finish

jQuery Scrollable beta-0.1 - 17 july 2014
 - First version

Use the jQuery Scrollable issues for support related questions, feedback, feature requests and bug reports.