JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <div style="background-color:red;" class="autoscroll">
    <p style="line-height:3;color:white;">
    Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem
    </p>
  </div>
  <div style="background-color:blue;" class="autoscroll">
    <p style="line-height:3;color:white;">
    Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>
    </p>
  </div>
  <div style="background-color:green;" class="autoscroll">
    <p style="line-height:3;color:white;">
    Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem
    </p>
  </div>
  <div style="background-color:brown;" class="autoscroll">
    <p style="line-height:3;color:white;">
    Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>
    </p>
  </div>
</body>

CSS

.autoscroll{
  min-height:100%;
}
html, body, p{
  margin:0;
  padding:0;
}

JavaScript

$(function() {

  var scrollFlag = true;
  window.setTimeout(function(){

    $(window).on('wheel keydown scroll',function(event){

      var validate_scroll = false;
      var scroll_direction = '';
      if(event.type=="wheel"){
        if(event.originalEvent.deltaY < 0){
          scroll_direction = 'up';
          validate_scroll = true;
        }
        if(event.originalEvent.deltaY > 0){
          scroll_direction = 'down';
          validate_scroll = true;
        }
      }else{ //keydown
        if(event.which == 38){ //UP
          scroll_direction = 'up';
          validate_scroll = true;
        }
        if(event.which == 40){ //DOWN
          scroll_direction = 'down';
          validate_scroll = true;
        }
      }

      if(validate_scroll && scrollFlag){
        var windowHeight = $(window).height();
        var st = $(window).scrollTop();
        var st2 = windowHeight + st;

        if (scroll_direction == 'down'){ 
          //downscroll
          $('.autoscroll').each(function(){

            var ost = $(this).offset().top;
            if (ost < st2 && st < ost && scrollFlag){

              console.log('smooth scrolling down');
              disableScroll();
              scrollFlag = false;
              $('window,html,body').stop(true);

              $('html,body').animate({
                scrollTop: ost
              }, 1200, "linear", function(){
                enableScroll();
                scrollFlag = true;
              });

            }
          });
        }else if (scroll_direction == 'up'){
          //upscroll

          $('.autoscroll').each(function(){
            var ost = $(this).offset().top;
            var ost2 = ost + $(this).outerHeight(true);
            if (ost2 < st2 && st < ost2 && scrollFlag){
              console.log('smooth scrolling up');
              disableScroll();
              scrollFlag = false;
              $('window,html,body').stop(true);

              $('html,body').animate({
            ...