Facebook-like jQuery Scrollbar Plugin - slimScroll
File Size: | 62.3 KB |
---|---|
Views Total: | 32676 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

slimScroll is a simple and lightweight jQuery plugin for transforming any div into a scrollable area with a nice Facebook-Like scrollbar.
You might also like:
- jQuery Plugin For Custom Scrollbar - scrollbox
- jQuery Custom Scrollbar Plugin - malihu
- Responsive Browser Scrollbar Replacement Plugin - ClassyScroll
- Tiny jQuery Plugin For Beautifying Scrollbar - perfect-scrollbar
- nanoScroller - Mac OS X Lion-Styled Scrollbars
Basic Usage:
1. Include jQuery Library, Jquery UI and slimScroll.min.js in your head section
<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.23/jquery-ui.js"></script> <script type="text/javascript" src="slimScroll.min.js"></script>
2. Html
<div class="some-content-related-div"> <div id="inner-content-div"> <p>Lorem ipsum dolor sit amet, consectetur .... snip</p> </div> </div>
3. Call the function
$(function(){ $('#inner-content-div').slimScroll({ height: '250px' }); });
4. All default options.
// width in pixels of the visible scroll area width : 'auto', // height in pixels of the visible scroll area height : '250px', // width in pixels of the scrollbar and rail size : '7px', // scrollbar color, accepts any hex/color value color: '#000', // scrollbar position - left/right position : 'right', // distance in pixels between the side edge and the scrollbar distance : '1px', // default scroll position on load - top / bottom / $('selector') start : 'top', // sets scrollbar opacity opacity : .4, // enables always-on mode for the scrollbar alwaysVisible : false, // check if we should hide the scrollbar when user is hovering over disableFadeOut : false, // sets visibility of the rail railVisible : false, // sets rail color railColor : '#333', // sets rail opacity railOpacity : .2, // whether we should use jQuery UI Draggable to enable bar dragging railDraggable : true, // defautlt CSS class of the slimscroll rail railClass : 'slimScrollRail', // defautlt CSS class of the slimscroll bar barClass : 'slimScrollBar', // defautlt CSS class of the slimscroll wrapper wrapperClass : 'slimScrollDiv', // check if mousewheel should scroll the window if we reach top/bottom allowPageScroll : false, // scroll amount applied to each mouse wheel step wheelStep : 20, // scroll amount applied when user is using gestures touchScrollStep : 200, // sets border radius borderRadius: '7px', // sets border radius of the rail railBorderRadius : '7px'
More Examples:
- Height / Width options
- Scrollbar options
- Rail options
- Start position
- Chaining
- Mulitple bindings
- Programmatic Scrolling
- Scroll Events
- allowPageScroll option
- disableFadeOut option
- wheelStep option
- nested elements
- dynamic content
Change Log:
v1.3.3 (2015-11-19)
- updated to the latest version
v1.3.3 (2014-09-01)
- updated to the latest version
v1.3.2 (2013-12-27)
- updated to the latest version
v1.3.1 (2013-08-18)
- updated to the latest version
This awesome jQuery plugin is developed by rochal. For more Advanced Usages, please check the demo page or visit the official website.