February 8, 2024 5:01 am

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.

How to create Facebook style scroll bar with jQuery & CSS

[wpdm_file id=49]DEMO

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.&nbsp;&nbsp;&nbsp;=> <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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

2 responses to “How to create Facebook style scroll bar with jQuery & CSS”

  1. Dave says:

    How do you remove the scroll bar on the right? FB doesn’t have that. Thanks.

  2. Pawel says:

    Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *