JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

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

CSS

div{
    width: 300px;
    height: 300px;
    background: #333;
}

JavaScript

var div = document.getElementById('div');

var onWheel = function(event){
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail) ));
    (delta < 0) ? console.log('down') : console.log('up');
};

var onMove = function(event){
    console.log(event.pageX, event.pageY);
};

var onUp = function(event){
    console.log(event.pageX, event.pageY);
    div.removeEventListener('mousemove', onMove, false);
};

var onDown = function(event){
    console.log(event.pageX, event.pageY);
    div.addEventListener('mousemove', onMove, false);
};   

div.addEventListener('mouseup', onUp, false);
div.addEventListener('mousedown', onDown, false)
div.addEventListener('DOMMouseScroll', onWheel, false);
div.addEventListener('mousewheel', onWheel, false);