JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll">
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
    Please scroll exactly one click here.
</div>
<textarea id="results"></textarea>

CSS

#scroll {
    width: 400px;
    height: 100px;
    background-color: #ddd;
    overflow: auto;
}

#results {
    width: 100%;
    height: 500px
}

JavaScript

var scroll = document.getElementById('scroll'),
    results = document.getElementById('results');

results.value = navigator.userAgent + '\n';

scroll.addEventListener('wheel', function(e) {
    results.value += 'wheel: deltaY=' + e.deltaY + ', deltaMode=' + e.deltaMode + '\n';
});

scroll.addEventListener('mousewheel', function(e) {
    results.value += 'mousewheel: wheelDelta=' + e.wheelDelta + ', detail=' + e.detail + '\n';
});