Slimscroll – facebook like scroll bar jquery plugin

by  
Share:
Slimscroll - facebook like scroll bar jquery plugin

One of the best looking feature of facebook is their scrollbar. I was looking for a similar jquery plugin for one of my projects and guess what I came across slimscroll which amazed me, It is so lightweight and has same feature which happens to be in facebook scrollbar. So I thought why not share this plugin with you all.

View Demo

How to integrate slimscroll

A special thanks to Piotr Rochala for this commendable work. Adding slimscroll in your project is very easy. Just take a look at these 4 steps and you are done in less than a minute.

1. Attach jquery file, make sure the version is higher than 1.7

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>

2. Attach slimscroll plugin to to the page.
<script type="text/javascript" src="jquery.slimscroll.min.js"></script>

3. Give an unique id to your content container.
<div id="test">
  <p> your content goes here</p>
  <p> your content goes here</p>
  <p> your content goes here</p>
  <p> your content goes here</p>
</div>

4. Just before your end of script (body tag) bind slimscroll to the div container.
$(function(){
    $('#test').slimScroll({
        height: '100px'
    });
});

 

Additional setting for slimscroll

Name Possible Values Description Default
width ‘auto’, ‘100px’… width in pixels of the visible scroll area auto
height ‘auto’, ‘100px’… height in pixels of the visible scroll area 250px
size only in px width in pixels of the scrollbar and rail 7px
position left, right Sets the position of the scrollbar left
color #000, #FF0000 scrollbar color, accepts any hex/color value #000
distance 1px, 2px.. distance in pixels between the side edge and the scrollbar 1px
start top or bottom default scroll position on load top
opacity 0 to 1 sets scrollbar opacity 0.4
alwaysVisible true or false enables always-on mode for the scrollbar false
disableFadeOut true or false check if we should hide the scrollbar when user is hovering over false
railVisible true or false sets visibility of the rail false
railColor ‘#f00’… sets rail color #333
railOpacity 0 to 1 sets rail opacity 0.2
railDraggable true or false whether we should use jQuery UI Draggable to enable bar dragging true
railClass any class name defautlt CSS class of the slimscroll rail slimScrollRail
barClass any class name defautlt CSS class of the slimscroll bar slimScrollBar
allowPageScroll true or false check if mousewheel should scroll the window if we reach top/bottom false
wheelStep 10, 15… scroll amount applied to each mouse wheel step 20
touchScrollStep 200, 300 scroll amount applied when user is using gestures 200
borderRadius 1px, 2px.. sets border radius 7px
railBorderRadius 1px, 2px.. sets border radius of the rail 7px

Here’s an example of additional settings.

$(selector).slimScroll({
    width: '450px',
    height: '250px',
    size: '9px',
    position: 'right',
    color: '#3d3d3d',
    distance: '20px',
    start: $('#child_image_element'),
    railVisible: true,
    railColor: '#000',
    railOpacity: 0.5,
    alwaysVisible: true,
    wheelStep: 5,
    allowPageScroll: false,
    disableFadeOut: false
});

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

s.shivasurya on

i was expecting tutorial!! great work bro!

Reply
imdad on

How to get old scroll position in slimscroll ?

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.