JSFiddle - React, Tailwind, and code Playground

HTML

<p id="myP">Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
    sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut
    et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa
    mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae
    sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae.
    Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
    Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum
    orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum...

CSS

p {
    height: 300px;
    overflow: auto;
    background-color: orange;
    padding: 50px 0;
}

JavaScript

console.clear();

/* Smooth scroll */
Math.easeOut = function(t, b, c, d) {
    t /= d;
    return -c * t * (t - 2) + b;
};

// Out Back Quartic
Math.bounce = function(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (4 * tc + -9 * ts + 6 * t);
};

(function() { // do not mess global space
    var
        interval, // scroll is being eased
        mult = 0, // how fast do we scroll
        dir = 0, // 1 = scroll down, -1 = scroll up
        steps = 50, // how many steps in animation
        length = 30; // how long to animate
    function MouseWheelHandler(e) {
        e.preventDefault(); // prevent default browser scroll
        clearInterval(interval); // cancel previous animation
        ++mult; // we are going to scroll faster
        var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if (dir != delta) { // scroll direction changed
            mult = 1; // start slowly
            dir = delta;
        }
        for (var tgt = e.target; tgt != document.documentElement; tgt = tgt.parentNode) {
            var oldScroll = tgt.scrollTop;
            tgt.scrollTop += delta;
            if (oldScroll != tgt.scrollTop) break;
        }
        var start = tgt.scrollTop;
        var end = start + length * mult * delta; // where to end the scroll
        var change = end - start; // base change in one step
        var step = 0; // current step
        interval = setInterval(function() {
            var pos;

            // 50 = Padding
            if (tgt.scrollTop < 50 || tgt.scrollTop > tgt.scrollHeight - tgt.offsetHeight - 50) {
                pos = Math.bounce(step++, start, change, steps);
            } else {
                pos = Math.easeOut(step++, start, change, steps);
            }
            tgt.scrollTop = pos;
            if (step >= steps) { // scroll finished without speed up - stop by easing out
                mult = 0;
                clearInterval(interval);
            }

        },...