JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">0</div>
<div id="up">0</div>
<div id="down">0</div>

JavaScript

var i = 0;
var u = 0;
var d = 0;
$(document).bind('mousewheel', updateValues)
                 
function updateValues(e){
    i++;
    $('#all').text(i);
    if(e.originalEvent.wheelDelta > 0) {
        u++;
        $('#up').text(u);
    } else {
        d++;
        $('#down').text(d);
    }
    $(document).unbind('mousewheel');
   setTimeout(function(){$(document).bind('mousewheel', updateValues)}, 500);
};