JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

CSS

#one, #two, #three {
    height:100vh;
    width:100vw;
}
#one {
    background-color:black;
}
#two {
    background-color:red;
}
#three {
    background-color:blue;
}

JavaScript

var body = jQuery('body, html');
var newDistance = 0;
var movement;
var newPosition = 0;
var isAnimating = false;

jQuery(window).on('scroll', function (e) {
    if (!isAnimating) {
        e.preventDefault();
        isAnimating = true;
        jQuery(body).stop();
        movement = window.pageYOffset;
        var winh = window.innerHeight;
        if (movement >= (newPosition + 100)) {
            newDistance += winh;
            jQuery(body).stop().animate({
                scrollTop: newDistance
            }, {
                duration: 'slow',
                complete: function () {
                    isAnimating = false;
                }
            });
            newPosition = newDistance;
        } else if (movement <= (newPosition - 100)) {
            newDistance -= winh;
            jQuery(body).stop().animate({
                scrollTop: newDistance
            }, {
                duration: 'slow',
                complete: function () {
                    isAnimating = false;
                }
            });
            newPosition = newDistance;
        } else {
            jQuery(body).stop().animate({
                scrollTop: newPosition
            }, {
                duration: 'slow',
                complete: function () {
                    isAnimating = false;
                }
            });
        };
    }

});