JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {
  background: #f6f6f6;
  height: 1000px;
  padding-top:50px;
}

div {
  width: 80%;
  margin: 0 auto;
  background: white;
  height: 400px;
  transition:.3s margin linear;
}

JavaScript

$(function() {
	var more= 20;
  $('body').on('mousewheel', function(e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {
      var st = $(window).scrollTop();
      console.log(more)
      if (st == 0 && more < 160) {
        $('div').css({'margin-top': more+'px'});
        more+=20
      } else {
      	$('div').css({'margin-top': '0'});
        more=0;
      }
      setTimeout(function(){
      	$('div').css({'margin-top': '0'});
        more=0;
      },500)
    }
  })
});