JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="slide">
	<div class="slide__inner">
		нажмите стрелку "вниз"
	</div>
</div>
<div class="rest">нажмите стрелку "вверх"</div>

CSS

*{
			box-sizing:border-box;
		}
		html, body{
			margin:0;
			padding:0;
		}
		.slide{
			background:#333;
			overflow:hidden;
			transition:height .5s;
			color:#fff;
			text-align:center;
			font-size:50px;
			position:relative;
		}
		.slide__inner{
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
		}
		.rest{
			background:#0f0;
			height:2000px;
			text-align:center;
			font-size:50px;
		}

JavaScript

var HEIGHT = getWindowHeight();
var SLIDE = document.querySelector(".slide");
function getWindowHeight(){
	return window.innerHeight;
}

function watchScroll(direction){
	if(direction == "bottom"){
		SLIDE.style.height = "0";
		document.body.style.overflow = "visible";
	}
	else{
		SLIDE.style.height = HEIGHT + "px";
		document.body.style.overflow = "hidden";
	}
}

function init(){
	SLIDE.style.height = HEIGHT + "px";
}

document.onwheel = function(e){
	if(e.deltaY > 0 && window.pageYOffset == 0){
		watchScroll("bottom");
	}
	else if(e.deltaY < 0 && window.pageYOffset == 0){
		watchScroll("top");
	}
}

document.onkeydown = function(e){
	var code = e.which || e.keyCode
	if(code == 40 && window.pageYOffset == 0){
		watchScroll("bottom");
	}
	else if(code == 38 && window.pageYOffset == 0){
		watchScroll("top");
	}
}

window.onload = function(){
	if(window.pageYOffset == 0){
		document.body.style.overflow = "hidden";
		init();
	}
}
window.onresize = init;