Question

I am looking for a basic and simple way to buildt a scrollbar with jquery, but i cant seem to find any good tutorials, and i dont want to use a plugin. I have looked at some plugins but my JS skills are way to poor to understand these plugins.

So I am looking for a simple, basic and lightweight to buildt scrollbar, anybody an idea?

Answer 1

You mean something like this?

But it’s just a non-plugin concept that uses the jQuery UI library:

DEMO

var parH = $('.parent').outerHeight(true);
var areaH = $('.scrollable').outerHeight(true);
var scrH = parH / (areaH/parH);

function dragging(){     
    var scrPos = $('.scrollbar').position().top;   
    $('.scrollable').css({top: -(scrPos*(areaH/parH)-1)});
}
    
$('.scrollbar').height(scrH);
$('.scrollbar').draggable({
    axis: 'y',
    containment: 'parent',    
    drag: function() {
         dragging();
    }   
});

HTML e.g:

<div class="parent">    
    <div class="scrollbar"></div>    
    <div class="scrollable">
        text...
    </div>
</div>

CSS e.g:

.parent{
    position:relative;
    height:200px;
    width:180px;
    background:#eee;
    overflow:hidden;
    padding-right:17px;
}
.scrollable{
    position:absolute;
    top:0px;        
    width:180px;
    background:#cf5;
}
.scrollbar{
    cursor:n-resize;
    position:absolute;
    top:0px;
    right:0px;
    z-index:2;
    background:#444;
    width:17px;
    border-radius:8px;
}

You can play to turn it into a plugin and improve the code.

A good start I think.