Custom Scroll

by levchenko_d

HTML

<div class="thing">content goes here</div>

CSS

.thing{
    height: 1000px;
}



.scroll_wrap{
    background: rgba(0,0,0,0.8);
    overflow: hidden;
    position: relative;
}

.scroll_slave{
    overflow-y: scroll;
}

.scroll_master{
    position: absolute;
    top: -20px;
    right: 0;
    overflow: hidden;
    overflow-y: scroll;
    opacity: 0;
    z-index: 99;
}

.scroll_bar{
    position: absolute;
    right: 5px;
    margin-top: 8px;
    top: 0;
    width: 7px;
    min-height: 15px;
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    opacity: 0.6;
}

.scroll_master:hover ~ .scroll_bar{
    opacity: 0.8;
}

.scroll_master:active ~ .scroll_bar{
    opacity: 0.9;
}

JavaScript

var customScroll = function(content, options){
    var wrap = document.createElement('div'),
        master = document.createElement('div'),
        slave = document.createElement('div'),
        scrollbar = document.createElement('div'),
        placeholder = document.createElement('div');
    
    wrap.className = 'scroll_wrap';
    master.className = 'scroll_master';
    slave.className = 'scroll_slave';
    scrollbar.className = 'scroll_bar';
    placeholder.className = 'scroll_placeholder';
    
    wrap.style.width = options ? options.width+'px' : '150px';
    wrap.style.height = slave.style.height = options ? options.height+'px' : '150px';
    master.style.height = options ? options.height+40+'px' : '190px';
    slave.style.width = options ? options.width+20 +'px' : '170px';
    
    content.parentNode.insertBefore(wrap, content);
    wrap.appendChild(slave);
    wrap.appendChild(master);
    wrap.appendChild(scrollbar);
    slave.appendChild(content);
    master.appendChild(placeholder);
    
    scrollbar.style.height = (wrap.scrollHeight-30)*(wrap.scrollHeight/slave.scrollHeight)+'px';
    placeholder.style.height = slave.scrollHeight+'px';

    function moveScroll(){
        var top = (wrap.scrollHeight-30)*(master.scrollTop/master.scrollHeight);
        scrollbar.style.top = top+'px';
    }
    
    master.onscroll = function(e){
        moveScroll();
        slave.scrollTop = master.scrollTop;
    }
    
    slave.onscroll = function(){
        master.scrollTop = slave.scrollTop;
    }

};

var cs = new customScroll(document.querySelector('.thing'));