Mousewheel Event

HTML

Scroll here with mouse wheel...

<table>
  <tr>
    <td id="x1y1">top-left</td>
    <td id="x0y1">top</td>
    <td id="x-1y1">top-right</td>
  </tr>
  <tr>
    <td id="x1y0">left</td>
    <td id="info">&times;</td>
    <td id="x-1y0">right</td>
  </tr>
  <tr>
    <td id="x1y-1">down-left</td>
    <td id="x0y-1">down</td>
    <td id="x-1y-1">down-right</td>
  </tr>
</table>

CSS

body {
  padding: 50px;
  font: normal bold 30px/1.4 Times, Serif;
  color: black;
  background-color: white;
}

td {
  border: 1px solid #eee;
  font: 14px sans-serif;
  width: 90px;
  height: 90px;
  vertical-align: middle;
  text-align: center;
  transition: background-color 0.2s 1.5s linear;
  background-color: white;
}

.scrolled {
  background-color: green;
  transition: none;
}

JavaScript

var doScroll = function(e) {
  const deltaX = Math.max(-1, Math.min(1, e.deltaX));
  const deltaY = Math.max(-1, Math.min(1, e.deltaY));

  // Do something with `delta`
  const elmId = `#x${deltaX}y${deltaY}`;
  document.querySelector("#info").innerHTML = `x:${e.deltaX} y:${e.deltaY}`;
  document.querySelector(elmId).className = "scrolled";

  window.setTimeout(id => document.querySelector(id).className = "", 0, elmId);

  e.preventDefault();
};

if (window.addEventListener) {
  window.addEventListener("wheel", doScroll, false);
}