Slick Custom Scrollbar script v1.2
Update to v1.2 (April 16th, 15'): Adds touch scroll support in mobile browsers. Only .js file changed from v1.1
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
Step 1: Add the below code to the <HEAD> section of your page:
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:
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:
Dynamically generated elements:
|
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.