JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<div id="wrapper">
<canvas id="canv" width='90vw' height='90vh'></canvas>
</div>

CSS

body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;  
}

JavaScript 1.7

var self;

class BrowserEventsService {  
  constructor() {
    self = this;
    this.prevwheel = 0;
    this.mouseWheelHandler = this.onMouseWheel.bind(this);
    this.runPlaceListeners = this.placeListeners.bind(this);
    this.runPlaceListeners();
  }
  get wheelEvent() {
    if ('onwheel' in document) return 'wheel';
    if ('onmousewheel' in document) return 'mousewheel';
    return 'MozMousePixelScroll';
  }

  placeListeners() {
  	console.log("listen");
    document.body.addEventListener(this.wheelEvent, this.mouseWheelHandler);
  }
  
  onMouseWheel(e) {
  if (window.timeout_id) window.clearTimeout(window.timeout_id);
    let value = e.wheelDelta || -e.deltaY || -e.detail;
    console.log({"diff":this.prevwheel - Math.abs(value)})
    this.prevwheel = Math.abs(value);
  }
}

var brevent = new BrowserEventsService();