JSFiddle - React, Tailwind, and code Playground

by neonsilk

HTML

<div class="stats-pane"></div>
<div>Hey.</div>
<div>Hi.</div>
<div>Hello.</div>

CSS

html, body {
    height: 10000px;
}
.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 = $(window).scrollTop();
var scrollDelta = 0;
$(window).scroll(function(){
    var newScrollTop = $(window).scrollTop();
    scrollDelta = scrollTop - newScrollTop;
    scrollTop = newScrollTop;
});
$(window).on("wheel", function(e){
    e = e.originalEvent;
    var pxPerDeltaUnit = Math.abs(scrollDelta) / Math.abs(e.deltaY);
    var deltaMode = DeltaModes[e.deltaMode];
    var stats = [deltaMode + ": " + e.deltaY];
    stats.push("px delta: " + scrollDelta);
    stats.push("px/" + deltaMode + ": " + pxPerDeltaUnit);
    statsPane.html('<div>' + stats.join('</div><div>') + '</div>');
    scrollTop = newScrollTop;
});