Untitled

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Canvas Scrolling</title>
  <style>

  </style>
</head>

<body>
  <style>
    canvas {
      border: 1px solid gray;
      padding: 2px;
      /* cursor: pointer; */
    }
  </style>

  <canvas id="canvas" width="20px" height="512px"></canvas>
  <span>position: </span>
  <span id="position">0 </span>
  <span>&nbsp;</span>
  <span>value: </span>
  <span id="value">0 </span>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var width = 20;
    var height = 500;
    var scrollbarSize = 20;
    var max = 100;
    var drag = false;
    var value = 0;
    var positionY = 0;

    function drawScrollbarInFrame() {
      console.log("drawScrollbarInFrame: positionY=" + positionY);
      window.requestAnimationFrame(drawScrollbar);
    }

    function drawScrollbarByValue(value) {
      positionY = ((height - scrollbarSize) / max) * value;
      drawScrollbarInFrame();
    }

    function drawScrollbar() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#aaa';
      ctx.fillRect(0, positionY, width, scrollbarSize);

      drawPosition();
    }

    function drawPosition() {
      value = Math.ceil(max / height * positionY);

      var positionEl = document.getElementById('position');
      positionEl.innerHTML = positionY;

      var valueEl = document.getElementById('value');
      valueEl.innerHTML = value;
    }

    function onMouseDown(event) {
      //console.log("mouseDown");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drag = true;
    }

    function onMouseUp(event) {
      console.log("mouseUp");
      drag = false;
    }

    function onMouseMove(event) {
      if (!drag) {
        return;
      }
      positionY = event.pageY;
      drawScrollbarInFrame();
    }

    function onMouseWheel(event) {
      //console.log("mouseWheel=", event);

      // Invert can be done here?
      var delta = 1;
      if (event.deltaY < 0) {
        delta = 1;
      } else {
        delta *= -1;
      }

      positionY = positionY - delta;
      drawScrollbarInFrame();

      return false;
    }

    canvas.addEventListener('mousedown', onMouseDown, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('wheel', onMouseWheel, false);

    // initial draw with value of 0
    drawScrollbarByValue(0);
  </script>

</body>

</html>