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:

Then you can initialize the scrollbars like so:

One CSS definition must be added:

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):

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:

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:

You may also like...