JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wheelArea" style="background-color:lime;height:200px;width:200px">
</div>

JavaScript

function MouseScroll(event) {
      var rolled = 0;
      if('wheelDelta' in event) {
          rolled = event.wheelDelta;
      } else { // Firefox
          // The measurement units of the detail and wheelDelta properties are different.
          rolled = -40 * event.detail;
      }
      document.getElementById("wheelArea").innerHTML = (rolled > 0)?"Wheel Up":"Wheel Down";
  }

  function Init() {
      // for mouse scrolling in Firefox
      var elem = document.getElementById("wheelArea");
      if(elem.addEventListener) { // all browsers except IE before version 9
          // Internet Explorer, Opera, Google Chrome and Safari
          elem.addEventListener("mousewheel", MouseScroll, false);
          // Firefox
          elem.addEventListener("DOMMouseScroll", MouseScroll, false);
      } else {
          if(elem.attachEvent) { // IE before version 9
              elem.attachEvent("onmousewheel", MouseScroll);
          }
      }
  }
Init();