JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<!--<div id="container">
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
    <hr>Some content
    <hr>
</div>-->
<div id="draggableBarContainer">
    <div id="draggableBar"></div>
</div>
        <div id="log"></div>

CSS

#container {
    width:100px;
    height:100px;
    overflow:auto;
    border:2px solid #000;
}
#draggableBarContainer {
    width:10px;
    height:104px;
    background-color:#bbb;
    position:absolute;
    top:100px;
    left:120px;
}
html,body{
    margin:0;
    padding:0;
}
#draggableBar{
    height:20%;
    width:100%;
    background-color:#333;
    position:relative;
    top:0;
}

JavaScript

var mouseDown = false;
var divOffset ={x:0,y:0};
window.addEventListener("mousedown", function(e){
    if(e.target.id == 'draggableBar'){
    	mouseDown = true;
        divOffset.x = e.offsetX;
        divOffset.y = e.offsetY;
    }
});
window.addEventListener("mouseup", function(){
    mouseDown = false;
});
window.addEventListener("mousemove", function(e){
    if(mouseDown == true){
        var scrollBarButton = document.getElementById('draggableBar');
        if((scrollBarButton.parentNode.offsetHeight-scrollBarButton.offsetHeight) >= (e.pageY-scrollBarButton.parentNode.offsetTop-divOffset.y)){
            if(scrollBarButton.offsetTop >= 0){
        		scrollBarButton.style.top = e.pageY - scrollBarButton.parentNode.offsetTop - divOffset.y+'px';
            }
        }
        //console.log(scrollBarButton.style.top = e.pageY - scrollBarButton.parentNode.offsetTop - divOffset.y);
    }
});
function logMes(mes){
    document.getElementById('log').innerHTML = mes;
}