New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF3+ IE8+ Opera9+

Slick Custom Scrollbar script v1.1

Author: PK for Dynamic Drive

Updated: March 19th, 12 to v1.1, which adds the following improvements:

  • Ability to disable "overscroll" behaviour of scrollbar, so it doesn't briefly go beyond the ends of the container before bouncing back (thx to vwphillips and jscheuer1).
  • Mousewheel support via jQuery Mousewheel Plugin (thx to jscheuer1).

Description: There are plenty of situations where the default scrollbar of the browser doesn't quite cut it in terms of style or footprint. Well, Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS. The markup for the custom scrollbar is dynamically generated, leaving the original source untouched. Easily modify the look of the scrollbar using all the power afforded to you by CSS, whether it's giving it a background image, rounded corners, CSS3 shadows, or changing its thickness etc.

Demos:

Start of Paragraph A Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Start of Paragraph B Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Start of Paragraph E- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Start of Paragraph F Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Go to Paragraph B within Demo #1
Go to Paragraph E within Demo #2
Go to Paragraph F within Demo #2


Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

It references the following two .js files, which you should download:

Step 2: Then, add the below sample markup to the BODY section of your page, which shows two scrollable contents with custom scrollbars applied to them:

Select All

More Information

To add a custom scrollbar to a content, simply give the content's outer container an unique rel attribute to identify it using on the page, for example:

<div rel="scrollcontent1">
Long text here
Long text here
Long text here...
</div>

And then in the HEAD section of your page, call the jQuery method customscroll() on said element:

$( document ).ready( function() { //when page loads
 $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical" } );
});

where the direction setting should be set to either "vertical" for up down scrolling content, or "horizontal" for left right.

The standard behaviour of the scrollbar is to slightly over scroll, meaning it can be dragged slightly beyond the container edges to give it that "elastic" feel. You can disable or increase/ increase the "overscroll" by defining the "bounce" option inside the initialization code:

$( document ).ready( function() { //when page loads
 $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical", bounce:0 } ); //disables "overscroll"
 $( "div[rel='scrollcontent2']" ).customscroll( { direction: "vertical", bounce:10 } ); //set bounce to 10 (px)

});

The default bounce (aka "overscroll") value is 20px if non is specified, meaning an overscroll amount of around 20 pixels.

That completes the initialization of a scrollable content, though there are some minimal styles you need to define on the scrollable content in order for the script to function correctly on it.

Minimum required style of a Scrollable Content

There are a few minimum styles each scrollable content should carry to ensure the custom scrollbar script renders properly on them. But before getting to that, it's helpful to first understand just what happens when you call customscroll() on an element. Given the original content DIV with rel="scrollcontent1", when the script is initialized on it, it dynamically adds the following new elements to it with the given CSS class names:

Original element:
  • div[rel='scrollcontent1']: Original DIV element carrying given rel attribute.

Dynamically generated elements:

  • .scrollcontent1-content: Inner DIV that gets dynamically inserted inside the original DIV, surrounding its contents.
  • .scrollcontent1-bar: The main bar portion of the custom scrollbar.
  • .scrollcontent1-drag: The draggable handle of the custom scrollbar.

For vertical, up down scrolling content, you want to make sure at the very least the original DIV carries an explicit height, such as:

div[rel='scrollcontent1'] { width: 250px; height: 200px;}

For horizontal, left right scrolling content, the reverse is true- the original DIV should have at least an explicit width:

div[rel='scrollcontent2'] { width: 300px; height: 300px; }
.scrollcontent2-content { width: 900px; } /* width should be set to total width of all floated inner container elements */

Furthermore, .scrollcontent2-content in this case should also carry an explicit width, this time reflecting the total width of the contents displayed inside the original DIV. Each piece of content inside the horizontal scrolling container should be floated left so they render side by side next to each other:

<div rel="scrollcontent2">
<p style="width: 300px; float: left;">This is content 1</p>
<p style="width: 300px; float: left;">This is content 2</p>
<p style="width: 300px; float: left;">This is content 3</p>
</div>

So the width of .scrollcontent2-content is calculated by adding up the width of all the floated contents, or 900px.

To customize the style and dimensions of the scrollbar, you would simply style .rel-bar and .rel-drag class of each scrollable content, replacing "rel" with the value of the container's "rel" attribute.

All this is documented inside the CSS code of Step 1 in case you need more guidance.