scrollbar

by BaliBalo

HTML

<div id="debug">Debug</div>
<div id="scrollThis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat, lorem sit amet consequat laoreet, nunc lacus gravida leo, a ultrices felis ligula ut neque. Cras non feugiat turpis. Nulla fringilla porta pharetra. Donec vitae mi sit amet eros volutpat condimentum sed vel libero. Nam urna est, dapibus et porta sed, porta nec enim. Nullam sed augue vitae neque porta tincidunt. Nam auctor iaculis urna, et placerat nunc imperdiet ut. Sed fringilla egestas neque eget eleifend. In hac habitasse platea dictumst.
<br><br>
Nam eros risus, tempus lobortis viverra eu, imperdiet eu lorem. Etiam et lectus nibh, sed sagittis sapien. Vestibulum sollicitudin ipsum eget arcu tristique suscipit. Cras suscipit velit in nisl hendrerit in malesuada purus blandit. Donec vitae justo quam, id congue nulla. Nunc egestas elit sed leo scelerisque ac pellentesque nibh pellentesque. Morbi eleifend arcu eget nisi fermentum tincidunt. Curabitur malesuada, mi eu sollicitudin hendrerit, nisl lectus hendrerit nisl, quis auctor velit neque sit amet felis. Nulla facilisi. Quisque eget pretium mauris. Nullam vulputate euismod massa quis posuere. Cras et nulla felis.
<br><br>
Donec diam dui, pulvinar id tincidunt sit amet, dapibus non purus. Quisque nec odio vitae velit tincidunt lacinia. Aliquam ut augue sit amet risus vulputate feugiat. Morbi sollicitudin sollicitudin tellus, eget volutpat lorem vulputate vitae. Nunc eu enim orci, ut pretium lorem. Nam nibh dui, accumsan in hendrerit sed, placerat aliquet justo. In hac habitasse platea dictumst.
<br><br>
Nulla nec orci non mauris facilisis aliquam eget eu ligula. Praesent sapien ipsum, cursus at dapibus a, placerat id erat. Proin tempor, nisl eu pellentesque accumsan, leo elit vulputate nulla, in sagittis sapien est ac justo. Praesent fringilla imperdiet hendrerit. Maecenas cursus bibendum sagittis. Phasellus nec magna vitae neque gravida sollicitudin vel sit amet augue. Quisque a neque augue....

CSS

#debug
{
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    overflow: hidden;
    background: rgba(50,50,50,0.8);
    color: white;
    font: 14px Consolas, monospace;
    text-shadow: 1px 1px black, 0 0 5px rgba(255,255,255,0.6);
    z-index: 999;
}
#scrollThis
{
    height: 500px;
}
.scrollable-wrapper
{
    position: relative;
}
.scrollable
{
    overflow: auto;
}
.scrollable-sbhider
{
    overflow: hidden;
}
.scrollbar-wrapper
{
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: rgba(200,200,200,0);
    -webkit-transition: all ease 0.2s;
}
.scrollbar
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(100,100,100,0.8);
    border-radius: inherit;
}
.scrollbar-wrapper:hover, .scrollbar-wrapper:active
{
    background: rgba(200,200,200,0.8);
    width: 12px;
    border-radius: 6px;
}

JavaScript

/* WARNING: fixes width of the element */
function makeScrollable(what)
{
    var elem = what[0];
    what.css('overflow', 'hidden');
    var oWidth = elem.offsetWidth;
    what.css('overflow', 'auto');
    var cWidth = elem.clientWidth;
    var scrollbarWidth = oWidth - cWidth;
    var scrollbar = $('<div />')
        .addClass('scrollbar-wrapper');
    $('<div />')
        .addClass('scrollbar')
        .appendTo(scrollbar);
    var wrapper = $('<div />')
        .addClass('scrollable-wrapper')
        .width(oWidth);
    var sbhider = $('<div />')
        .addClass('scrollable-sbhider')
        .width(oWidth - scrollbarWidth)
        .appendTo(wrapper);
    what.addClass('scrollable')
        .width(oWidth)
        .wrap(wrapper)
        .closest('.scrollable-wrapper')
        .append(scrollbar);
    attachOnScroll(what);
}
function attachOnScroll(elem)
{
    elem.on('scroll', function(e)
    {
        var $t = $(this);
        var sb = $t.closest('.scrollable-wrapper').find('.scrollbar');
        var sbcontainer = sb.parent();
        //$t.offset({'left': 0});
        var percent = $t.scrollTop() / ((this.scrollHeight || Infinity) - $t.height());
        var maxScroll = sbcontainer.height() - sb.height();
        sb.css('top', Math.floor(percent * maxScroll) + 'px');
    });
}
function updateScroll(which)
{
    var parent = which.parent();
    var percent = parseInt(which.css('top')) / (parent.height() - which.height());
    var maxScroll = (this.scrollHeight - $t.height()) || 0;
    
}
$(document).on('click', '.scrollbar-wrapper', function(e)
{
    var $t = $(this);
    $t.data('start', e.pageY - $t.offset().top);
});
$(document).on('mousedown', '.scrollbar', function(e)
{
    e.preventDefault();
    var $t = $(this);
    $t.data('start', e.pageY - $t.offset().top);
}).on('mousemove', function(e)
{
    e.preventDefault();
    $('.scrollbar').each(function()
    {
        var $t = $(this);
        if($t.data('start') === undefined) return;
        var $wrap =...