JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<div id="testbox">
    Here is some text;
    Here is some text;
    Here is some text;
    Here is some text;
    Here is some text;
    Here is some text;
    Here is some text;
</div>

CSS

#testbox {
    height: 300px;
    background-color: yellow;
}

JavaScript

var lowestDelta, lowestDeltaXY;

function smoothScroll(event) {
    var orgEvent = event || window.event,
        args = [].slice.call(arguments, 1),
        delta = 0,
        deltaX = 0,
        deltaY = 0,
        absDelta = 0,
        absDeltaXY = 0,
        fn;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    if (orgEvent.wheelDelta) {
        delta = orgEvent.wheelDelta;
    }
    if (orgEvent.detail) {
        delta = orgEvent.detail * -1;
    }
    if (orgEvent.deltaY) {
        deltaY = orgEvent.deltaY * -1;
        delta = deltaY;
    }
    if (orgEvent.deltaX) {
        deltaX = orgEvent.deltaX;
        delta = deltaX * -1;
    }
    if (orgEvent.wheelDeltaY !== undefined) {
        deltaY = orgEvent.wheelDeltaY;
    }
    if (orgEvent.wheelDeltaX !== undefined) {
        deltaX = orgEvent.wheelDeltaX * -1;
    }
    absDelta = Math.abs(delta);
    if (!lowestDelta || absDelta < lowestDelta) {
        lowestDelta = absDelta;
    }
    absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
    if (!lowestDeltaXY || absDeltaXY < lowestDeltaXY) {
        lowestDeltaXY = absDeltaXY;
    }
    fn = delta > 0 ? 'floor' : 'ceil';
    delta = Math[fn](delta / lowestDelta);
    deltaX = Math[fn](deltaX / lowestDeltaXY);
    deltaY = Math[fn](deltaY / lowestDeltaXY);
    args.unshift(event, delta, deltaX, deltaY);
    return ($.event.dispatch || $.event.handle).apply(this, args);
}

document.getElementById('testbox').addEventListener('wheel', smoothScroll, false);