JSFiddle - React, Tailwind, and code Playground

by neonsilk

HTML

<div class="stats-pane"></div>
<div class="cols">
    <div id="a" class="col">
        <div class="content"></div>
    </div>
    <div id="b" class="col">
        <div class="content"></div>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cols {
    height: 100%;
}
.col {
    float: left;
    width: 50%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.col:first-child {
    font-size: 50px;
    line-height: 100px;
}
.col:last-child {
    font-size: 500px;
    line-height: 1000px;
}
.content {
    height: 10000px;
    background-color: #999;
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
    background-size: 50px 50px;
}
.stats-pane {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #eee;
    font-family: monospace;
    text-align: right;
}

JavaScript

var DeltaModes = {
    0: "DOM_DELTA_PIXEL",
    1: "DOM_DELTA_LINE",
    2: "DOM_DELTA_PAGE"
};
var statsPane = $(".stats-pane");
var scrollTop = {
    a: $("#a").scrollTop(),
    b: $("#b").scrollTop()
};
var totals = {
    a: {},
    b: {}
};
$(".col").on("wheel", function (e) {
    e = e.originalEvent;
    var id = $(this).attr("id");
    var newScrollTop = $(this).scrollTop();
    var scrollDelta = scrollTop[id] - newScrollTop;
    var pxPerDeltaUnit = Math.abs(scrollDelta) / Math.abs(e.deltaY);
    var deltaMode = DeltaModes[e.deltaMode];
    
    totals[id][deltaMode] = (totals[id][deltaMode] || 0) + Math.abs(e.deltaY);
    totals[id].px = (totals[id].px || 0) + Math.abs(scrollDelta);
    var totalPxPerDeltaUnit = totals[id].px / totals[id][deltaMode];
    
    var stats = [deltaMode + ": " + e.deltaY];
    stats.push("px delta: " + scrollDelta);
    stats.push("px/" + deltaMode + ": " + pxPerDeltaUnit);
    stats.push("total px/" + deltaMode + ": " + totalPxPerDeltaUnit);
    statsPane.html('<div>' + stats.join('</div><div>') + '</div>');
    
    scrollTop[id] = newScrollTop;
});