JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrap'>
    <div class='scrollbar-example'>
        <span id='scrollbar' class='scrollbar-bar'></span>
    </div>
</div>
<div id='console'>Move box for data...</div>

CSS

* {
    font-family:arial;
}
#wrap {
    position:absolute;
    width:150px;
    height:200px;
    left:0px;
    top:0px;
    overflow:hidden;
    overflow-y:auto;
    border:1px solid black;
}
#console {
    position:absolute;
    width:150px;
    height:auto;
    left:0px;
    top:200px;
    overflow:hidden;
    overflow-x:auto;
    border:1px solid black;
}
.dragObject {
    position:absolute;
    width:50px;
    height:50px;
    background:rgba(0, 0, 0, 0.1);
    border:1px solid rgba(0, 0, 0, 0.2);
    cursor:move;
}
div:hover .scrollbar-example{opacity:1;}
.scrollbar-example{
    position:absolute;
    height:calc(100% - 20px);
    top:10px;
    width:5px;
    right:10px;
    background-color:rgba(0,0,0,0.2);
    border-radius:10px;
    opacity:0;
    transition:opacity 0.2s;
}
.scrollbar-example .scrollbar-bar{
    position:absolute;
    height:20%;
    top:10px;
    width:5px; 
    background-color:rgba(0,0,0,0.2);
    border-radius:10px;    
    transition:background-color 0.2s;
}
.scrollbar-example .scrollbar-bar:hover{
    cursor:pointer;
    background-color:rgba(0,0,0,0.4);    
}

JavaScript

function eventData(e) {
    return {
        event: e || window.event,
        sender: e.srcElement || e.target,
    };
};

$(document).ready(function (e) {
    function getScrollInfo($element){
            var text = 'scrollHeight: ' + $element[0].scrollHeight + '<br/>';
            text += ' Height: ' + $element.height() + '<br/>';
            text += ' scrollTop: ' + $element.scrollTop() + '<br/>';
            info.html(text);
        return{ height:$element[0].scrollHeight}
        };
    
    var info = $('#console'),
        content = $('#wrap');
        content.on('resize overflow', getScrollInfo(content));
        
    $('<div/>').addClass('dragObject').appendTo(content)
        .on('mousedown mouseup', function (e) {
            var sender = eventData(e).sender,
                event = eventData(e).event,
                $sender = $(sender);
    
            if (event.type == 'mousedown') {
                var mouseStartPosition = {
                    x: event.pageX,
                    y: event.pageY,
                },
                elementPosition = {
                    left: parseInt($sender.css('left')),
                    top: parseInt($sender.css('top')),
                };
                $(window).on('mousemove', function (esub) {
                    var subEvent = eventData(esub).event,
                        mx = (subEvent.pageX - mouseStartPosition.x) || 0,
                        my = (subEvent.pageY - mouseStartPosition.y) || 0,
                        position = {
                            left: (elementPosition.left + mx),
                            top: (elementPosition.top + my),
                        };
                    $sender.css(position);
                    //getScrollInfo(content);
                });
            }
            if (event.type == 'mouseup') {
                $(window).off('mousemove');
    
            }
        });
});