JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="page" style="background-color: #F00">a</div>
<div class="page" style="background-color: #0F0">b</div>
<div class="page" style="background-color: #00F">c</div>

CSS

.page {
    width: 500px;
    height: 1000px;
}

JavaScript

var actualPage = 0, movingPage = false;

window.onmousewheel = document.onmousewheel = wheel;
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) delta = event.wheelDelta/120;
    else if (event.detail) delta = -event.detail/3;
    
    if (delta) {
    	wheeling = true;
    	movePage(delta * -1);
    	if (event.preventDefault) event.preventDefault();
		event.returnValue = false;
	}
}

function movePage(val){
	if(movingPage) return;
	
	actualPage += val;
	if(actualPage < 0) actualPage = 0;
	else if(actualPage > 3) actualPage = 3;
	moveToPage(actualPage);
}


function moveToPage(val){
	if(movingPage || val == undefined) return;
	
	movingPage = true;
	var pos = $(".page").eq(val).offset().top;
	$('html, body').stop().animate({ scrollTop: pos }, 1200, function(){ movingPage = false; wheeling = false; });
}