Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, 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 simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .
Step 1. HTML code
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>
<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 <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;
}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()
{
</script> {
$('#section-scroll').jScrollPane();
});You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:
<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:
<script type="text/javascript">
$(function()
{
</script> {
$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
});$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.
.scroll-pane {
/*JScrollPane CSS*/
.jScrollPaneContainer {
}
.jScrollPaneTrack{
.jScrollPaneDrag{
.scroll-pane{padding:0;}
.scroll-pane p{
width: 400px;
height: 250px;
overflow:auto;
float: left;
}height: 250px;
overflow:auto;
float: left;
/*JScrollPane CSS*/
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;
overflow: hidden;
z-index: 1;
padding-right: 20px;
}
.jScrollPaneTrack{
position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;
}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;
}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;
}-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;
The final result is something like this:
You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.
0 comments