JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<body>
  <div style="background-color:red;" class="autoscroll">
    <div class="as-top"></div>
    <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 class="as-bottom"></div>
  </div>
  <div style="background-color:blue;" class="autoscroll">
    <div class="as-top"></div>
    <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 class="as-bottom"></div>
  </div>
  <div style="background-color:green;" class="autoscroll">
    <div class="as-top"></div>
    <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 class="as-bottom"></div>
  </div>
  <div style="background-color:brown;" class="autoscroll">
    <div class="as-top"></div>
    <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 class="as-bottom"></div>
  </div>
</body>

CSS

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

JavaScript

function isElementInViewport (el) {
    //this function is taken from
		//http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
    
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

$(function() {
  var scrollFlag = true;
  var lastScrollTo;

  function disableScroll() {}
  function enableScroll() {}

  // added helper function for scrolling
  function doScroll(toElement) {
    var ost = $(toElement).offset().top;

    disableScroll();
    scrollFlag = false;
    $('window,html,body').stop(true);

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

    $(document).on('mousewheel keydown',function(event){
    	if (!scrollFlag) {
      	event.preventDefault;
        return false;
      }
    
      var validate_scroll = false;
      var scroll_direction = '';
      if(event.type=="mousewheel"){
        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){
        if...