JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-wrap">
    <div class="my-div-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id sapien id nulla hendrerit dapibus lobortis et erat. Donec eget orci in enim congue viverra vitae nec leo. Nam laoreet lectus sed ipsum vestibulum tristique. Vestibulum in nisi sed massa commodo placerat. Mauris sit amet semper nisl. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus imperdiet, neque et tempus consequat, sapien eros imperdiet nibh, ac dictum nisi nunc feugiat nibh. Ut vel eleifend tortor. Quisque vitae leo ut urna iaculis fringilla. Cras ac magna ligula. Quisque pulvinar ligula lorem. Vivamus malesuada mattis magna non euismod. Maecenas imperdiet nec dolor luctus cursus. Donec gravida, metus nec pellentesque viverra, nunc lectus pellentesque eros, eget varius ante enim ac mauris. Curabitur commodo varius enim et bibendum. Suspendisse potenti. Morbi orci lacus, molestie ut odio quis, ultrices bibendum ante. Donec placerat sit amet nunc convallis scelerisque. Maecenas imperdiet eget magna quis fringilla. Maecenas placerat nunc non nulla interdum faucibus. Aliquam sit amet pulvinar lectus, nec elementum purus. Duis aliquet posuere elit nec rutrum. Donec vitae metus vehicula, fermentum massa id, iaculis turpis. Duis fermentum fringilla purus, sit amet sagittis mi dictum at. Ut vel mattis erat. Sed nisl purus, consectetur in congue et, scelerisque et nulla. Cras id pellentesque metus. Praesent vel arcu eros. Nulla sit amet purus ac dolor egestas porta. Mauris tellus velit, facilisis lobortis turpis porttitor, commodo tristique felis. Mauris viverra leo quis tortor vehicula, id placerat est sagittis. Cras porta dui nec pharetra iaculis. Proin id diam porttitor, commodo lectus vel, gravida lorem. Proin tristique justo ipsum. Pellentesque viverra neque nec pretium interdum. Maecenas convallis odio in dapibus porttitor. Cras massa risus, interdum a augue sit amet,...

CSS

.my-div-1 {
    border: 4px solid red;
}
.my-div-2 {
    border: 4px solid blue;
}
.my-div-3 {
    border: 4px solid green;
}

JavaScript

(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

divs = [$(".my-div-1"), $(".my-div-2"), $(".my-div-3")];

var lastScrollTop = 0;
var run = true;

$(window).scroll($.debounce(250, true, function () {
    var st = $(window).scrollTop();
    if (st > lastScrollTop) {
      $.each(divs, function (i, v) {
        ((v.offset().top - $(window).scrollTop()) < 0) && (next = i + 1);
      });      
      run = (next != divs.length) ? true : false;
    } else {
      $.each(divs, function (i, v) {
        ((v.offset().top - $(window).scrollTop()) < 0) && (next = i);
      }); 
      run = true;
    }
    if (run) {
      $('html, body').animate({
        scrollTop: divs[next].offset().top
      }, 1000,'linear', function() {
        lastScrollTop = $(window).scrollTop();
      });
    } else { lastScrollTop = $(window).scrollTop(); }
}));