JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div>
    <p>1</p>    
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
</div>

CSS

div {
    width: 50%;
    height: 2500px;
}
div p {
    height: 150px;
    background: #999;
    font-size: 2em;
}
div p:nth-child(odd) {
    background: #fff;
}

JavaScript

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";

function getDelta(e){
    var evt = e || window.event;
    evt = evt.originalEvent ? evt.originalEvent : evt;
    return delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;
}
function initMyScroll(){
    $(document).on(mousewheelevt+'.mywheel', function(e){
        e.preventDefault();
        var scrlTop = $(window).scrollTop();
        if(getDelta(e) < 0) {
            $(window).scrollTop(scrlTop + 150);
        } else {
            if(scrlTop > 0) $(document).off('.mywheel');
        }
    });
}
$(window).on(mousewheelevt, function(e){
    if($(this).scrollTop() <= 0 && getDelta(e) < 0){
        e.preventDefault();
        initMyScroll();
    }
});