Create a better scrollbar using jQuery NiceScroll Plugin

There are quite a lot of jQuery plugins for scrollbar. I find this jQuery NiceScroll Plugin is quite user friendly so i want to share it to you guys.

1. Download the jQuery NiceScroll Plugin file to your webroot js folder from GitHub or Google Code.

2. Create the following index.html.

<html>
<head>
  <title>Eureka! - jQuery NiceScroll Plugin</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="./js/jquery.nicescroll.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#scroll-area').niceScroll({
        autohidemode: 'false',     // Do not hide scrollbar when mouse out
        cursorborderradius: '0px', // Scroll cursor radius
        background: '#E5E9E7',     // The scrollbar rail color
        cursorwidth: '10px',       // Scroll cursor width
        cursorcolor: '#999999'     // Scroll cursor color
      });
    });
  </script>
  <style type="text/css">
    #scroll-area {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="scroll-area">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra facilisis lacus, sed dignissim urna pharetra consectetur. Integer eget imperdiet augue. Mauris nec elit augue, ac condimentum dolor. Proin eget enim et massa dignissim elementum et vitae augue. Morbi adipiscing imperdiet ligula, non porttitor nisi varius nec. Fusce vehicula venenatis faucibus. Nulla tincidunt tristique turpis, sollicitudin semper lectus vehicula lobortis.
  </div>
</body>
</html>

 

3. Check it out.
jquery-nicescroll-plugin-1
 

Done =)

Reference: jQuery NiceScroll Plugin

Advertisements

2 thoughts on “Create a better scrollbar using jQuery NiceScroll Plugin”

Leave a Reply

Fill in your details below or click an icon to log in:

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