Facebook-like jQuery Scrollbar Plugin - slimScroll

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.