JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<div id="wrapper">
    <div id="content"></div>
</div>

CSS

#wrapper {
    height:200px;
    overflow-y:scroll;
}

#content {
    -webkit-user-select:none;
}

JavaScript

var content = document.getElementById("content"),
    wrapper = document.getElementById("wrapper");

var pos;

// build content
var max = 1000, s = [], dt = new String(new Date().getTime())
for(var i=0;i<max;i++) {
    s.push("<div>" + dt + " " + i + "</div>");
}

content.innerHTML = s.join("");

wrapper.addEventListener("mousedown", function(event) {
    pos = {x:event.pageX, y:event.pageY + wrapper.scrollTop};
});

wrapper.addEventListener("mousemove", function(event) {
    if(!pos) return;
        
    var dx = event.pageX - pos.x,
        dy = pos.y - event.pageY;
    
    wrapper.scrollTop = dy;
    
    console.log("moving!",dy)
});

// catch mouseup globally to handle mouse leaving wrapper node
document.body.addEventListener("mouseup", function(event) {
    pos = undefined;
});