JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
ty to scroll on top of this red square
<div id='test'></div>
<div id="output"></div>

CSS

#test {
    height: 100px;
    width: 100px;
    background-color: red;
}

JavaScript

$('#test')
    .bind('mousewheel', function(event, delta) {
        var dir = delta > 0 ? 'Up' : 'Down';
        $("#output").html(dir)
    });