JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
     <main>	
		<div class="contslide">Liza1</div>
		<div class="contslide">Liza2</div>
		<div class="contslide">Liza3</div>
		<div class="contslide">Liza4</div>
        <div class="contslide">Liza5</div>
     </main>
</body>

CSS

body{width:100%;height:100%;  overflow:hidden; margin:0px;}
main{ position:absolute; width:100%;  height:100%;  font:20pt verdana;} 
main div{width:100%;  height:100%; }
main div:nth-child(odd) {
    background: #ff0000;
}

JavaScript

$(document).ready(function () {
    var delay = false;
$(document).on('mousewheel DOMMouseScroll', function(event) {
		event.preventDefault();
		if(delay) return;

		delay = true;
		setTimeout(function(){delay = false},200)

		var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

		var a= document.getElementsByClassName('contslide');
		if(wd < 0) {
		  for(var i = 0 ; i < a.length ; i++) {
			var t = a[i].getClientRects()[0].top;
			if(t >= 40) break;
		  }
		}
		else {
		  for(var i = a.length-1 ; i >= 0 ; i--) {
			var t = a[i].getClientRects()[0].top;
			if(t < -20) break;
		  }
		}
	$('html, body').animate({
		scrollTop: a[i].offsetTop
	});
	});
  });