A jQuery Scrollbar Replacement
Click here to see the demo page.
I was looking around recently for a jQuery based scrollbar replacement and spent quite some time trying out a few different libraries that I found in a blog post.
I was left quite disappointed as none of the scripts I tried (jScrollPane, ScrollBarPaper, and malihu’s custom content scroller) seemed to work well with my use case. In particular, none of them seemed to work well with content that was set to 100% height.
Malihu’s was promising, but as far as coding goes, it wasn’t written to be a proper plugin and needed a lot of cleanup.
So after wasting half a day trying out various scrollbar scripts, I ended up rolling my own. Here are the specs:
- Works with fixed or fluid height containers
- Uses default jQuery UI slider as a scrollbar
- Does not attempt to mimic full scroll bar behavior (I don’t want it to be full height, don’t need the up/down arrows)
- Responds to mousewheel scrolling
- Easing animation when position changed with a mouse click
- Small – just 72 lines of code including comments and blank lines
A sample screenshot:
Markup wise, the script only requires that you create a structure like so:
|
1 2 3 4 5 6 |
<div id="my-id"> <!--// The scrollable class is required //--> <div class="scrollable"> <!--// Content goes here //--> </div> </div> |
Then you can initialize the scrollbars like so:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ /* Settings and defaults: scrollbarHeight: "300px", // the height of the scrollbar scrollbarSize: "6px", // the size of the scrollbar positionX: "5px", // the distance from the right of the container positionY: "15px", // the distance from the top of the container easing: "easeOutQuart", // the named easing effect from jQuery UI pace: 20 // affects the mousewheel increment */ $("#myIdWhatever, #anotherId").prettyScroll(); $("#yetAnother").prettyScroll({"scrollbarHeight": "400px"}); }); |
One CSS definition must be added:
|
1 2 3 4 5 6 |
/*--- Your container must have an inner DIV with the class "scrollable" ---*/ .scrollable { width: 100%; height: 100%; overflow: hidden; } |
Two basic CSS overrides can optionally be added to make it more scroll bar like (feel free to toy around with this to get your scrollbar to look however you like):
|
1 2 3 4 5 6 7 |
/*--- Override jQuery styles so that there's no color in the slider track ---*/ .scroll-bar .ui-widget-header { background: #fff !important;} /*--- Override jQuery styles so that the handle is taller ---*/ .scroll-bar .ui-slider-handle { width: 1.1em !important; height: 2em !important; } |
Since it uses the default jQuery slider widget, you can just use whatever CSS you would normally use to customize the slider here.
You can download the script and demo here: prettyScroll.zip
Update (6/13/2011): I noticed that this page actually gets a lot of hits in my Google Analytics so I figured it was worth updating with some new script: prettyScroll.20110613.zip
It has some new code that shows how to scroll to an object that’s clicked in the scroll pane. Consider the following markup:
|
1 2 3 4 5 6 7 8 9 |
<div id="content3"> <div class="scrollable"> <p>Here is some stuff that's before.</p> <p>Another sentence.</p> <a id="toggler" href="">toggle</a> <p class="after" style="display:none">Lorem ipsum dolor sit amet...</p> <!-- shortened for brevity --> </div> </div> |
When the link “toggle” is clicked, I want to scroll to the link. I’ve cut off the content, but assume that it generates a large body of text that requires scrolling once visible. You can cause it to scroll to the element by triggering a custom event:
|
1 2 3 4 5 6 7 8 9 |
$("#toggler").click(function(e){ e.preventDefault(); var $this = $(this); $this.siblings(".after").toggle(); $this.parents(".scrollable").trigger("scrollTo", [$this]); }); |
