Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:
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:
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:
<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:
It's important set a fixed height and the property overflow to "auto". This is the result:
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-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>
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.
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.