JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#big {
    width: 500px;
    height: 4000px;
    background-color: #59a5d1;
}

JavaScript

var sq = {};
sq = document;
if (sq.addEventListener) {
    sq.addEventListener("mousewheel", MouseWheelHandler(), false);
    sq.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}

function MouseWheelHandler() {
    return function (e) {
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if (delta < 0) {
            /* Scroll Down */
            e.preventDefault();
            console.log("Down. I want this to happen only once");

        } else {
            /* Scroll Up */
            console.log("up. I want this to happen only once");
            e.preventDefault();
        }
        return false;
    }
    return false;
}