JSFiddle - React, Tailwind, and code Playground

by honk1

HTML

<div id="elem"></div>

CSS

#elem {
    background: red;
    width: 500px;
    height: 500px;
}

JavaScript

$('#elem').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down
    console.log('Down');
  } else {
    //scroll up
    console.log('Up');
  }
  //prevent page fom scrolling
  return false;
});