This plugin adds customizable scrollbars to any element. You can style the scrollbars using CSS. View Source.
1) Include the CSS file.
<link rel="stylesheet" type="text/css" href="jquery.scrollable.css" />
2) Include the JS file.
<script type="text/javascript" src="jquery.scrollable.js"></script>
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();
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 plugin.
This plugin is released under the MIT license.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor, nisl eu ullamcorper dictum, ante felis porta dolor, ac ultricies sapien odio eget lorem. Maecenas sit amet diam ante, sit amet luctus quam. Donec sed nulla lacus, ac volutpat odio. Praesent mattis ullamcorper arcu quis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas at mauris sem. Ut sit amet sem est. Pellentesque molestie libero eget dui interdum accumsan. Nullam eget odio ipsum, a placerat ante. Aenean fermentum pretium placerat. Donec eget urna lacus, quis condimentum diam. Maecenas convallis euismod sapien non semper. Donec aliquet arcu vel lectus blandit ac pellentesque magna pharetra. Integer in turpis nec leo consectetur condimentum at a lorem. Nulla mauris velit, sagittis sed iaculis et, adipiscing non dui. Pellentesque orci justo, iaculis vel lacinia id, semper nec dolor.
Nullam vitae diam eget urna eleifend varius. Proin fermentum nisl vulputate ligula eleifend sit amet suscipit magna elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris odio risus, euismod quis adipiscing at, porta vitae quam. Suspendisse aliquet fermentum malesuada. Nam luctus aliquam nibh, quis ultrices est hendrerit ut. Maecenas nec felis vitae ligula tincidunt feugiat vel sit amet augue. Maecenas a ligula arcu. Aenean ultrices convallis dolor vel euismod. Aliquam rutrum vehicula risus, condimentum pharetra est feugiat nec. Integer mi libero, pharetra in luctus sit amet, bibendum vel mi. Proin in leo ac ipsum eleifend gravida. Quisque sem mi, accumsan vel pharetra eu, malesuada non tortor. Curabitur convallis dictum orci at pretium. Nam dictum nunc eu lectus mattis quis feugiat enim viverra. Aenean ornare convallis arcu, vel rutrum lectus ultricies vel.
|
$("#box2").width(400).scrollable();
|
$("#box3").scrollable();
|
$("#box4").width(1200).scrollable();
|
$("#box5").width(400).scrollable({showButtons: false});
|
$("#box6").width(400).scrollable({animate: true});
|
$("#box7").scrollable({overlay: true});
|
Bigger: $('#box8').scrollable({width: 300, height: 300});
Smaller: $('#box8').scrollable({width: 200, height: 200});
|
|
|
$("#box9").width(400).scrollable({className:'thin',showButtons:false});
|
$("#box10").width(400).scrollable({className:'thick'});
|
$("#box11").width(400).scrollable({className:'round'});
|