JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="screen">

  </div>
  <div class="screen snapScroll" id="screen-0">

  </div>
  <div class="screen snapScroll" id="screen-1">

  </div>
  <div class="screen snapScroll" id="screen-2">

  </div>
  <div class="screen snapScroll" id="screen-3">

  </div>
</body>

CSS

.screen {
  height: 100vh;
  width: 100%;
}

.screen:nth-child(1) {
  background-color: purple;
}

.screen:nth-child(2) {
  background-color: lightblue;
}

.screen:nth-child(3) {
  background-color: yellow;
}

.screen:nth-child(4) {
  background-color: orange;
}

.screen:nth-child(5) {
  background-color: red;
}

JavaScript

var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  var scrollPos = $(window).scrollTop();
  var $window = $(window);

  //Easings
  jQuery.easing['jswing'] = jQuery.easing['swing'];
  // t: current time, b: begInnIng value, c: change In value, d: duration
  jQuery.extend(jQuery.easing, {
    easeOutExpo: function(x, t, b, c, d) {
      return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
    }
  });

  var progressPositions = [];
  var prevIndex = -1;
  var currentIndex = -1;
  progressPositions = [];
  $('.snapScroll').each(function(index, element) {
    progressPositions.push($(element).offset().top + (windowHeight / 2));
  });

	var animating = false;
  $window.on("scroll", function(evt) {
    scrollPos = $(window).scrollTop();
    currentIndex = -1;
    for (index in progressPositions) {
      var progressPosition = progressPositions[index];

      if ((scrollPos + windowHeight) > progressPosition) {
        currentIndex = index;
      }
    }

    if (currentIndex != prevIndex) {
      if (currentIndex > prevIndex) {
        if (currentIndex > -1) {
          disable_scroll();
          var nextIndex = parseInt(currentIndex);
          var screenId = '#screen-' + nextIndex;
          if (animating === false) {
          	animating = true;
            $('html, body').animate({
              scrollTop: $(screenId).offset().top
            }, 500, 'easeOutExpo').promise().then(function() {
              setTimeout(function() {
                enable_scroll();
                animating = false;
              }, 500);
            });
          }
        }
      }
    }
    prevIndex = currentIndex;
  });



  function disable_scroll() {
    document.onmousewheel = function() {
      stopWheel();
    } /* IE7, IE8 */
    if (document.addEventListener) { /* Chrome, Safari, Firefox */
      document.addEventListener('DOMMouseScroll', stopWheel, false);
    }
  }

  function enable_scroll() {
    document.onmousewheel =...