Share Coding

Tutorials, Problems, Stuffs …

Custom Scroll bar like Facebook by using JQuery Plugin

Click here for Demo

To make a scrollbar like that, you will need jQuery, jQuery UI and SlimScroll: http://rocha.la/jQuery-slimScroll

 
1. Import the jQuery, jQuery UI library and SlimScroll plugin

<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="http://rocha.la/misc/jsdemos/slimScroll/slimScroll.js"></script>

 
2. Create some elements:

<div id="customScrollArea" style="background-color:#eee;">
    <div id="insideText" style="padding:10px;width:370px;text-align:justify;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.
    </div>
</div>

 
3. Javascript implements:

$(document).ready(function() {
    $('#customScrollArea').slimscroll({
        width: '400px',
        height: '50px',
        alwaysVisible: true
    });
});
Advertisements

2 responses to “Custom Scroll bar like Facebook by using JQuery Plugin

  1. 1like4me 2013/06/20 at 2:24 pm

    i cant make it work on my site 😦 but I’ll keep on trying 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: