JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<strong>Mousewheel Direction:</strong><br>
delta=<span id="delta">none</span><br>
wheel=<span id="wheel">none</span>
    </div>

CSS

BODY { padding: 0; margin: 0 }
DIV { position: absolute; width: 100%; height: 100% }

JavaScript

// Check new-style wheel event
function onwheel(event){
    var log;
    if (event.deltaY < 0) log = 'up';
    else if (event.deltaY > 0) log = 'down';
    if (event.deltaX < 0) log = 'right';
    else if (event.deltaX > 0) log = 'left';
    document.getElementById('delta').innerHTML= log;
}
// Also check DOMMouseScroll (mousewheel in other browsers)
function onmousewheel(event) {
    dir = event.wheelDelta || -event.detail;
    log = dir > 0 ? 'up' : dir < 0 ? 'down' : '???';
    document.getElementById('wheel').innerHTML = log;
}

window.addEventListener('load', function(e) {
    window.addEventListener('wheel', onwheel, false);
    window.addEventListener('DOMMouseScroll', onmousewheel, false);
    document.body.addEventListener('mousewheel', onmousewheel, false);
}, false);