[Nlk]

<section id="slider">
	<section class="page"></section>
	<section class="page"></section>
	<section class="page"></section>
	<section class="page"></section>
</section>

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	min-height: 100%;
}
body {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    flex-direction: column;
}
.page {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}
.page:nth-of-type(1) {
	background-color:red;
}
.page:nth-of-type(2) {
	background-color:green;
}
.page:nth-of-type(3) {
	background-color:yellow;
}
.page:nth-of-type(4) {
	background-color:gray;
}
.page:not(.active) {
	visibility: hidden !important;
	opacity: 0;
}


section {
	flex: 1 0 auto;
	height: 100vh;
	width: 100%;
	overflow: auto;
}

'use strict';
document.addEventListener("scroll", eventScroll);

let lastScrolled = 0;
function eventScroll() {
    const scrolled = window.pageYOffset || document.documentElement.scrollTop;
	if (scrolled < lastScrolled) {
		showPage(pageIndex - 1);
	} else {
		showPage(pageIndex + 1);
	}
	lastScrolled = scrolled;
}

let pageIndex = 0;
showPage(pageIndex);

function showPage(n) {
	const pages = document.querySelectorAll('.page');
	pages[pageIndex].classList.add("active");
}