jQuery – Using Slider as a Scrollbar

misc_vol3_074 Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar.

Today I’m going to show you exactly how that’s done.

First we need to adjust our html.  We need to add a content area to the html we had last week.  I’m going to put this content area to the right of the scrollbar, but you could put it to the left by simply changing the CSS.

    <div id="slider"></div>
    <div id="scroller"><div id="content">
    here is lots of text<br />

The CSS to position this all correctly looks like this:

    height: 242px;
    width: 13px;
    margin:0px 10px 0px 10px;
    width: 1159px;
    height: 243px;
    width: 215px;

Not much exciting here.  Slider is basically the same as last week.  The area we want to scroll is composed of two elements, a div we’ve given the ID "content" that is nested inside another div we’ve named "scroller."  The scroller is a fixed height and set so that if the content is longer than the scroller, it will not be displayed.

The rest is simple jQuery magic:

$(function() {
    { change: handleChange,
        slide: handleSlide,
        min: -100,
    max: 0 });

function handleChange(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      .animate({ scrollTop: -ui.value *
     (maxScroll / 100)
    }, 1000);


function handleSlide(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      .attr({ scrollTop: -ui.value
        * (maxScroll / 100)   });


At the top of our javascript, we are simply wiring up our slider control.  The most notable thing you’ll want to pay attention to here is that I’ve set the minimum height and maximum height so that zero is at the top of the slider.  If you don’t do this, the slider will start with the thumb at the bottom.  Not exactly what we have in mind.

We need to wire up two event handlers, slide and change, so that the content area will scroll as we move the thumb.  We’ve done that in the document-ready function.

The two event handlers first determine the maximum scroll height and then position the content area within the scroller area.  Again, to make this work correctly, we needed to negate the value that was passed in in the ui parameter.

Obviously, it would not take a whole lot of work to package this all up as a plugin that does all the work for you, but it helps to know how to do it if you need to.


Other post in jQuery

Related Post

5 Responses to “jQuery – Using Slider as a Scrollbar”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail