https://github.com/mikecao/jquery-scrollable

A jQuery plugin that enables custom scrollbars
https://github.com/mikecao/jquery-scrollable

javascript jquery jquery-plugin scrollbar

Last synced: 27 days ago
JSON representation

A jQuery plugin that enables custom scrollbars

• Host: GitHub
• URL: https://github.com/mikecao/jquery-scrollable
• Owner: mikecao
• License: mit
• Created: 2012-09-26T05:14:16.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2014-01-16T06:08:50.000Z (almost 11 years ago)
• Last Synced: 2023-03-11T13:49:10.999Z (almost 2 years ago)
• Topics: javascript, jquery, jquery-plugin, scrollbar
• Language: JavaScript
• Size: 298 KB
• Stars: 9
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jQuery Scrollable Plugin

This plugin adds customizable scrollbars to any element. You can style the scrollbars using CSS.

[View Examples](http://mikecao.github.io/jquery-scrollable/)

# Usage

1) Include the CSS file.

    

2) Include the JS file.

    

3) Add scrollbars to an element.

    $("#content").scrollable();

For scrollbars to appear, the content must be larger than the scrollable area. By default the plugin will set a height and width of 200px by 200px for the scrollable area. You can set the dimensions of the area by passing in optional height and width parameters.

    $("#content").scrollable({ width: 640, height: 480 });

If the content changes, simply call the plugin again and the scrollbars will adjust to the new content size. 

    $("#content").append('Adding more text.').scrollable();

# Options

You can modify the behavior of the scrollbars by passing in optional parameters to the plugin.

    width - Width of the scrollable area. (default: 200)

    height - Height of the scrollable area. (default: 200)

    showButtons - Show buttons on the scrollbar. (default: true)

    buttonSpeed - Distance to scroll in pixels when clicking on buttons. (default: 20)

    minSliderSize - Minimum size for the scrollbar slider in pixels. (default: 10)

    animate - Animate the scrolling when clicking on the scrollbar. (default: false)

    scrollSpeed - Scrolling animation speed in milliseconds. (default: 300)

    mousewheel - Enable mousewheel support. (default: true)

    mousewheelSpeed - Distance to scroll in pixels when using the mousewheel. (default: 30)

    overlay - Scrollbars only appear when hovering over the content. (default: false)

    fadeSpeed - Fading animation speed in milliseconds for overlay scrollbars. (default: 300)

    className - CSS classname to add to the scrollable element. (default: '')

Mousewheel support requires the [jquery.mousewheel](https://github.com/brandonaaron/jquery-mousewheel) plugin.

# License

This plugin is released under the [MIT](https://github.com/mikecao/jquery-scrollable/blob/master/LICENSE) license.