Question

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

<div class="demo">
    <div class="content">
       My content comes here
    </div>
    <div class="scrollbar">
       <div class="thumb"></div>
    </div>
</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;

$('.thumb').height($.thumbHeight);

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.

.

Answer 1

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) {
    $scrollbar.show();

    $scrollbarHandle.height(
        Math.max(
            50,
            Math.floor($scrollbar.height() * viewportRatio)
        )
    );
} else {
    $scrollbar.hide();
}

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.