JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="one"><div id="two"></div></div><div id="scroll"></div>

CSS

#one{
    display:inline-block;
width: 200px;
    height: 300px;
background: silver;

overflow: hidden}

#two{
width: 200px;
    height: 800px;
    background:#eee;
}

#scroll {
display: inline-block;
    width: 25px;
    height: 50px;
    background: silver;
    position: absolute;
}

JavaScript

var scroll = document.getElementById('scroll'),
    area = document.getElementById('two');

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

scroll.onmousedown = function(){
document.onmousemove = getCursorY;
    console.log(cursor);
}