Take the 2-minute tour ×

I am trying to code a custom scroll bar in HTML.
Something like

<div class="demo">
    <div class="content">
       My content comes here
    <div class="scrollbar">
       <div class="thumb"></div>

I am trying to set height of the thumb dynamically with jquery.

But, unable to figure out the formula for the thumb size.
tried some thing like

$.scrollViewHeight = $('.demo').height();
$.contentHeight = $('.content').height();
$.thumbHeight = ($.scrollViewHeight / $.contentHeight) * $.scrollViewHeight;


but it doesn't work.
Q1. What could be the formula to get the height of the thumb?

also i kept min-thumb size as 50px using css.
Q2. So, how do we calculate the speed of thumb in this case as content will be much more.


share|improve this question
By "thumb" I believe you mean "handle"? –  Ates Goral Jan 24 '13 at 17:46
Also, do you have to use your own implementation or can you use an existing library like Antiscroll? –  Ates Goral Jan 24 '13 at 17:46
Yes, I mean thumb the one which moves in a scrollbar with mouse wheel. Also, I want to code it by myself. –  Madhusudhan Dollu Jan 24 '13 at 17:55
You might as well edit you question to use the more common term "handle" then... –  Ates Goral Jan 24 '13 at 18:02
Also, use var $scrollViewHeight instead of $.scrollViewHeight. You clearly don't want to clutter / overwrite the $ namespace with your own properties? –  Ates Goral Jan 24 '13 at 18:18

1 Answer 1

up vote 2 down vote accepted

There's of course more involved in writing your custom scrollbar, but this can get you started:

var $container = $(".container"),
    $content = $(".content"),
    $scrollbar = $(".scrollbar"),
    $scrollbarHandle = $(".scrollbar-handle");

/* To update scrollbar handle height (only) */

var viewportRatio = $container.height() / $content.height();

if (viewportRatio < 1) {

            Math.floor($scrollbar.height() * viewportRatio)
} else {

The next steps would be:

  1. Two-way synchronization of content and scollbar handle scroll positions: Reposition handle when content is expanded, shrunk or scrolled by other means. Set scroll position of content when handle dragged.
  2. Pagination when the areas of the scrollbar falling outside the handle are clicked.
share|improve this answer

Your Answer


