JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<div id="mydiv">test</div>

CSS

body { height: 1500px; }
#mydiv { width: 200px; height: 200px; background: #f00; }

JavaScript

var scrollThing = {
    // 33: PageUp, 34: PageDown, 35: End, 36: Home, 37: Left, 38: Up, 39: Right, 40: Down
    keys: [33, 34, 35, 36, 37, 38, 39, 40],
    preventDefault: function(e) {
        e = e || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.returnValue = false;
    },
    keydown: function(e) {
        for (var i = scrollThing.keys.length; i--;) {
            if (e.keyCode === scrollThing.keys[i]) {
                scrollThing.preventDefault(e);
                return;
            }
        }
    },
    disable: function() {
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = scrollThing.preventDefault;
        document.onkeydown = scrollThing.keydown;
    },
    enable: function() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;
    }
}
$('#mydiv').hover(scrollThing.disable, scrollThing.enable);