휠을 한번 내렸을 때 한 페이지가 내려가는 홈페이지들이 있다.
예시
청와대홈피
메인 | 청와대, 국민 품으로
2022년 5월 10일 청와대를 국민께 돌려드리겠습니다 .
www.opencheongwadae.kr
HTML
<html>
<body>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</body>
</html>
CSS
html, body {
display: block;
margin: 0;
height: 100%;
}
section {
height:100%;
width:100%;
}html, body에 위와 같은 속성을 지정하지 않으면 section height: 100%가 먹히지 않는다.... 왜 그런지 원리를 잘 모르겠움
----원인 파악
Height 100% 속성은, 부모 태그의 높이에 종속된다. 때문에 section의 부모태그인 body에 먼저 100%을 주어야 section도 우리가 원하는대로 높이가 조정됨
JS
window.addEventListener("wheel", function(e){
e.preventDefault();
},{passive : false});
var $html = $("html");
var page = 1;
var lastPage = $("section").length;
//scroll animation time
var timeScrollAnimation = 750;
$html.animate({scrollTop:0},10);
$(window).on("wheel", function(e){
if($html.is(":animated")) return;
if(e.originalEvent.deltaY > 0){
if(page== lastPage) return;
page++;
}else if(e.originalEvent.deltaY < 0){
if(page == 1) return;
page--;
}
var posTop = (page-1) * ($(window).height());
$html.animate({scrollTop : posTop}, timeScrollAnimation);
});
JQuery 문법에 대해서는 자세히 설명하지 않겠다
휠이벤트를 받아오고 그에 따라 window.height만큼 스크롤을 내리는 원리
댓글