Oct 31, 2012

Stylish ScrollPanes with jQuery and CSS3


Some day ago my friend in ma office asked about how to apply CSS for scroll bar and he really interested in that design for his new official project . so I was thinking how is this really works and its looks crazy as I was always assuming that its all related to OS but few websites got clean and simple and I like in particular scroll-pane used in each div tab..How..! 



I keep searching on how to implement that kind of scroll-pane in his webpage and I finally found jScrollPane . This is very simple using jScrollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.I prepared a basic version ready to reuse in your project using jQuery and with some lines of CSS3 code and here it goes...



Step 1:


First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>


Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example &lt;p> tags:



<div id="section-scroll" class="scroll-pane">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>


<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:



.scroll-pane {
width: 400px;
height: 250px;
overflow:auto;
}

It's important set a fixed height and the property overflow to "auto". This is the result:

                                             


Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":


<script type="text/javascript">
$(function()
{
$('#section-scroll').jScrollPane();
}
);
</script>

Step 2.


Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects.


.scroll-pane
{
  width: 400px;
  height: 250px;
  overflow:auto;
  float: left;
}


/*JScrollPane CSS*/

.jScrollPaneContainer {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-right: 20px;
}


.jScrollPaneTrack
{
  position:absolute;
  cursor:pointer;
  right:0;
  top:0;
  height:100%;
}


.jScrollPaneDrag
{
  position:absolute;
  background:#CCC;
  cursor:pointer;
  overflow:hidden;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}


.scroll-pane
{
  padding:0;
}


.scroll-pane p
{
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  background:#232323;
  padding:12px;
  color:#CCC;
  font-size:14px;
  line-height:16px;
}
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

2 comments:

Thanks for Comment