JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  scroll in the area below (in either direction)
</p>
<canvas id="canvas" width="200" height="200"></canvas>

<div id="long"></div>

<script>
  //make a wide document
  for (var i = 0; i < 100; i++) {
    var t = document.createTextNode(String(i));
    var p = document.createElement('span');
    p.appendChild(t);
    document.getElementById('long').appendChild(p);
  }

  // make a tall document
  for (var i = 0; i < 100; i++) {
    var t = document.createTextNode(String(i));
    var p = document.createElement('div');
    p.appendChild(t);
    document.getElementById('long').appendChild(p);
  }

  document.getElementById('canvas').addEventListener('wheel', wheel)

  var r = 128;
  var g = 128;
  var b = 128;

  function wheel(event) {
    r += event.deltaX;
    g += event.deltaY;

    r = Math.max(Math.min(255, r), 0);
    g = Math.max(Math.min(255, g), 0);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var color_string = 'rgb(' + r + ',' + g + ',' + b + ')';
    ctx.fillStyle = color_string;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    console.log(color_string);
    event.preventDefault();
  }

</script>