전체 화면이 굴러가는 원리는 무엇입니까?css의 어떤 속성을 사용했습니까?(필기시험)

ES6 지식을 배울 때fullpage를 보았습니다.js, 슬라이드나 윤방도와 같은 전체 화면 스크롤을 실현할 수 있습니다.

//html  
<div id="wrap">
	<div id="main">
		<div id="page1" class="page"></div>
		<div id="page2" class="page"></div>
		<div id="page3" class="page"></div>
		<div id="page4" class="page"></div>
	</div>
</div>

랩 블록은 창에서 볼 수 있는 부분입니다. js를 통해 창의 시각적 크기를 가져오고 overflow:hidden 속성으로 설정하여 창에 스크롤 바가 나타나지 않고 창 크기의 한 페이지만 표시할 수 있습니다.main 영역을 설정하고relative로 지정하며main 블록의 top 속성을 바꾸어 서로 다른 페이지를 전환합니다. 구체적인 css 코드는 다음과 같습니다.

html,body{
     
	margin:0;
	padding:0;
}
#wrap{
     
	width:100%;
	overflow:hidden;
	background:#111;
}
#main{
     
	width:100%;
	background:#222;
	position:relative;
}
.page{
     
	width:100%;
	margin:0;
}

js 코드의 주요 부분은 스크롤 이벤트에 대한 함수 귀속이다. 대부분의 브라우저는 mousewheel 이벤트를 제공했고Firefox 3.5+는 지원하지 않지만 같은 역할을 하는 이벤트를 지원한다: DOMMouseScroll.mousewheel 이벤트: event.wheelDelta가 되돌아오는 경우 롤러가 위로 굴러가는 것을 의미한다.DOMMouseScroll 이벤트: event.detail가 되돌아오는 경우 마이너스 값은 롤러가 위로 굴러가는 것을 설명하고 페이지당 높이는 document.body.clientHeight+px이다.구체적인 코드는 다음과 같습니다.

var pages = document.getElementsByClassName('page');
var wrap = document.getElementById('wrap');
var len = document.documentElement.clientHeight;
var main = document.getElementById('main');
wrap.style.height=len+"px";
for(var i=0;i<pages.length;i++){
     
	pages[i].style.height=len+"px";
}
if(navigator.userAgent.toLowerCase().indexOf('firefox') !=-1){
     
	document.addEventListener("DOMMouseScroll",scrollFun);
}else if(document.addEventListener){
     
	document.addEventListener("mousewheel",scrollFun,false);
}else if(document.attachEvent){
     
	document.attachEvent("onmousewheel",scrollFun);
}else{
     
	document.onmousewheel=scrollFun;
}
var startTime = 0;
var endTime = 0;
var now = 0;
function scrollFun(e){
     
	startTime = new Date().getTime();
	var event = e || window.event;
	var dir = event.detail || -event.wheelDelta;
	if(startTime - endTime > 1000){
     
		if(dir>0 && now > -3*len){
     
			now -= len;
			main.style.top = now + "px";
			endTime = new Date().getTime();
		}else if(dir<0 && now < 0){
     
			now += len;
			main.style.top=now+"px";
			endTime=new Date().getTime();
		}
	}else{
     
		event.preventDafault();
	}
}

주: 상기 내용은 기타 대신코드를 참고합니다.