Facebook style Scroll bar using Jquery

Most of them eager to know about facebook and it’s functionality, so here we just know about facebook style scroll bar, how the scroll bar is seems in the facebook, the black color scroll bar and it presence when we hover the part where the scroll is presence, similar like the same style the scroll is ready by using Jquery, let see it.

DOWNLOAD             LIVE DEMO

Mostly we can see this kind of scroll bar in facebook chat box, recent activity feeds and notifications side, that has automatically hide the field when we come away from there. And mostly we discussed about facebook style textarea, facebook style tooltip and invite facebook friends.

CODE

<div class="box" id="box">
   
   <ul class="ulclass"> 
                <h2 align="center">Titles</h2>
   
   <a href="http://www.2my4edge.com/2013/06/facebook-style-textarea-auto-grow-using.html" target="_blank"> 
   <li class="liclass">  Facebook style textarea </li>   
   </a>
   
   <a href="http://www.2my4edge.com/2013/06/print-or-save-web-page-as-pdf-using.html" target="_blank"> 
   <li class="liclass">  Print or save the page as .PDF    </li> 
   </a>
   
   <a href="http://www.2my4edge.com/2013/06/htaccess-uses-and-redirect-www-to-non.html" target="_blank"> 
   <li class="liclass">  .HTACCESS www to non-www and non-www to www </li>
   </a>   
   
   
   <a href="http://www.2my4edge.com/2013/06/choose-state-and-city-based-on-country.html" target="_blank">  
   <li class="liclass"> Choose state based on country    </li> 
   </a>
    
   <a href="http://www.2my4edge.com/2013/06/change-colored-image-into-black-and.html" target="_blank"> 
   <li class="liclass">Chage color to black and white image usinf css </li> 
   </a>   
   
   
   </ul>

   </div>

and here we are going apply this scroll bar only to the id #box div, so make script for this, and the script is

SCRIPT

<script src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function () {
    $("#box").niceScroll({ autohidemode: true })
    });
</script>

Like the above script we just have to call the id, #box, and the niceScroll({ autohidemode:ture })
Else we can make it as false of autohidemode, Jquery plugin is needed, and nicescroll.js is also needed for this function.

CSS

#box2000 > div{ 
-webkit-transition: width 0.2s ease; 
-moz-transition: width 0.2s ease; 
-o-transition: width 0.2s ease; 
-ms-transition: width 0.2s ease;    
transition: width 0.2s ease; 
}
#box2000 > div:hover{
width:150%!important; 
cursor:pointer;
}

We know about this ease that is using in css3 for make delay of operation, and the 2000 is global variable declaration. On hover the width is important so we have increase that more than 100%.
And that’s it, enjoy with the demo.

RELATED POSTS:

Better and Flexible Tooltip using LiteTooltip.js

Floating menu using Jquery plugin

Toggle Show/hide concept using java script

Choose state and city based on country using Jquery

Facebook Style Textarea Auto Grow Using JQuery Plugin and Css

Browser full screen API using Query

Image Zoommer like E-commerce site using multizoom.js

Simple Pagination with loading effect using Qjuery, PHP and MySql