JSFiddle - React, Tailwind, and code Playground

by tinyhustlee

HTML

<div class="container">
  <div>Test your mousewheel, try to scroll now</div>
  <div id="currentMove">Movement: </div>
  <div>Scroll Up Count: <span id='scrollUp'>0</span></div>
  <div>Scroll Down Count: <span id='scrollDown'>0</span></div>
  <pre id="output"></pre>
</div>

CSS

#currentMove{
  font-size: 20px;
  font-weight: bold;
  background: white;
}

JavaScript

var scrollUp = 0, scrollDown = 0;
$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
    console.log(event.originalEvent);
        $('#currentMove').html('Movement: Scroll up');
        $('#currentMove').css('background','#98FB98');
        scrollUp++;
        $('#scrollUp').html(scrollUp);
        
    }
    else {
        $('#currentMove').html('Movement: Scroll down');
        $('#currentMove').css('background','#FFB6C1');
        scrollDown++;
        $('#scrollDown').html(scrollDown);
    }
});