How to create Facebook style scroll bar with jQuery & CSS
Facebook is one of the best designs people want to copy or want to implement in there web applications, so today I am going to give you an article on Facebook scroll style which is very nicely created and simply explained in below article.
I have used a jQuery library nicescroll and CSS to create this scroll bar.
CSS used in this method:
#pageData { height:300px; overflow:scroll; width:450px; border:1px blue dashed; margin:0 auto; margin-top:80px; margin-bottom:11px; padding: 10px; } #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:120%!important; cursor:pointer; }
#pageData Used to styling div box, #box2000 > div:hover used to increase scroll bar size on hand over.
jQuery external libraries required for this page:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.nicescroll.js"></script>
jQuery function initialization to create scroll bar
<script type="text/javascript"> $(document).ready(function () { $("#pageData").niceScroll({ autohidemode: true }) }); </script>
Function niceScroll start on document ready, $(“#pageData”).niceScroll({ autohidemode: true }) used to add scroll on div with id pageData and autohidemode: true used to hide scroll on hand out from div.
HTML script to show data:
<div id="pageData"> <div> <a href="https://www.phpgang.com/?p=294" target="_blank">How to Integrate jQuery Scroll Paging with PHP</a> </div> <!-- Add your content here and show nice stylish bar on that area. --> </div>
All togather
In this section we are showing you complete code to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>How to create Facebook style scroll bar with jQuery & CSS | PGPGang.com</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> img {border-width: 0} * {font-family:'Lucida Grande', sans-serif;} </style> </head> <body> <div> <h2>How to create Facebook style scroll bar with jQuery & CSS example. => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2> </div> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery.nicescroll.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#pageData").niceScroll({ autohidemode: true }) }); </script> <style> #pageData { height:300px; overflow:scroll; width:450px; border:1px blue dashed; margin:0 auto; margin-top:80px; margin-bottom:11px; padding: 10px; } #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:120%!important; cursor:pointer; } </style> <div id="pageData"> <div> <a href="https://www.phpgang.com/?p=294" target="_blank">How to Integrate jQuery Scroll Paging with PHP</a> </div><br> <div> <a href="https://www.phpgang.com/?p=298" target="_blank">How to Crop Image with jQuery and PHP</a> </div><br> <div> <a href="https://www.phpgang.com/?p=301" target="_blank">How to block Inappropriate content with javascript validation</a> </div><br> <div> <a href="https://www.phpgang.com/?p=304" target="_blank">How to Mask an input box in jQuery</a> </div><br> <div> <a href="https://www.phpgang.com/?p=290" target="_blank">How to implement jquery Timeago with php</a> </div><br> <div> <a href="https://www.phpgang.com/?p=309" target="_blank">How to Integrate live search in PHP and MySQL with jQuery</a> </div><br> <div> <a href="https://www.phpgang.com/?p=312" target="_blank">How to Resize text using jQuery</a> </div> <div> <a href="https://www.phpgang.com/?p=294" target="_blank">How to Integrate jQuery Scroll Paging with PHP</a> </div><br> <div> <a href="https://www.phpgang.com/?p=298" target="_blank">How to Crop Image with jQuery and PHP</a> </div><br> <div> <a href="https://www.phpgang.com/?p=301" target="_blank">How to block Inappropriate content with javascript validation</a> </div><br> <div> <a href="https://www.phpgang.com/?p=304" target="_blank">How to Mask an input box in jQuery</a> </div><br> <div> <a href="https://www.phpgang.com/?p=290" target="_blank">How to implement jquery Timeago with php</a> </div><br> <div> <a href="https://www.phpgang.com/?p=309" target="_blank">How to Integrate live search in PHP and MySQL with jQuery</a> </div><br> <div> <a href="https://www.phpgang.com/?p=312" target="_blank">How to Resize text using jQuery</a> </div> </div> </p> </body> </html>
Feedback
If you have any issue in its configuration or want to suggest some thing please feel free to comment. For your ease we make its demo and script to download.
Tutorial Categories:
How do you remove the scroll bar on the right? FB doesn’t have that. Thanks.
Thanks for sharing!