JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stats-pane"></div>
<button id="statsreset">Reset</button>
<img src="http://lengua.la/ruler12Inch96dpi.png">

CSS

html, body {
    padding:0;
    margin:0;
}
.stats-pane {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #eee;
    font-family: monospace;
    text-align: right;
}
#statsreset {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #eee;
    font-family: monospace;
    text-align: right;
}

JavaScript

var DeltaModes = {
    0: "PIXEL",
    1: "LINE",
    2: "PAGE"
};
var statsPane = $(".stats-pane");
var scrollTop = Math.round($(window).scrollTop());
var wheelEventsCount = 0;
var deltaPosition = 0;
var pixelPosition = 0;
var inchPosition = 0;
var newScrollTop = 0;
var scrollDelta = 0;
var pxPerDeltaUnit = 0;
var deltaMode = 0;

cleanstats = function(){
  wheelEventsCount = 0;
  deltaPosition = 0;
  pixelPosition = 0;
  inchPosition = 0;
  newScrollTop = 0;
  scrollDelta = 0;
  pxPerDeltaUnit = 0;
  deltaMode = 0;
  var stats = [];
  stats.push(deltaMode + ": 0");
  stats.push("px: " + scrollDelta);
  stats.push("px/deltaY: " + pxPerDeltaUnit);
  stats.push("wheel Events: " + wheelEventsCount);
  stats.push("delta Position: " + deltaPosition);
  stats.push("pixel Position: " + Math.round(pixelPosition));
  stats.push("inch Position: " + Math.round(inchPosition*100)/100);
  statsPane.html('<div>' + stats.join('</div><div>') + '</div>');
};
$("#statsreset").on("click", function(){
	cleanstats();
});
$(window).on("wheel", function(e){
    newScrollTop = Math.round($(window).scrollTop());
});
$(window).on("wheel", function(e){
    e = e.originalEvent;
    //newScrollTop = Math.round($(window).scrollTop());
    scrollDelta = scrollTop - newScrollTop;
    pxPerDeltaUnit = Math.abs(scrollDelta / e.deltaY);
    deltaMode = DeltaModes[e.deltaMode];
    deltaPosition = deltaPosition + e.deltaY;
    if (deltaPosition<0) deltaPosition=0;
    if (deltaPosition>21) deltaPosition=21;
    //else {
    wheelEventsCount = wheelEventsCount + 1;
      pixelPosition = deltaPosition*pxPerDeltaUnit;
      inchPosition = pixelPosition/96;
    //}
    var stats = [];
    stats.push(deltaMode + ": " + e.deltaY);
    stats.push("scrollTop: " + scrollTop);
    stats.push("scrollDelta: " + scrollDelta);
    stats.push("px/deltaY: " + pxPerDeltaUnit);
    stats.push("wheel Events: " + wheelEventsCount);
    stats.push("delta Position: " + deltaPosition);
    stats.push("pixel Position: " +...