JSFiddle - React, Tailwind, and code Playground

by maharajan a

HTML

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

CSS

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

JavaScript

$('#elem').on('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll down
    $('#elem').css('background', 'green')
  } else {
    //scroll up
    $('#elem').css('background', 'blue')
  }
  //prevent page fom scrolling
  return false;
});