HTML
<body>
<div class="content"><h1>1</h1></div>
<div class="content"><h1>2</h1></div>
<div class="content"><h1>3</h1></div>
<div class="content"><h1>4</h1></div>
<div class="content"><h1>5</h1></div>
<div class="content"><h1>6</h1></div>
<div class="content"><h1>7</h1></div>
</body>
CSS
1 html{overflow: hidden;}
2
3 html, body{width: 100%; height: 100%;}
4
5 .content{
6 width: 100%; height: 100%;
7 background-color: blueviolet;
8
9 position: relative;
10 }
11 .content > h1{
12 position: absolute;
13 top: 50%; left: 50%;
14 transform: translate(-50%,-50%);
15
16 font-size: 20em;
17 font-weight: bold;
18 text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
19
20 }
21 .content:nth-child(even){background-color: #333;}
▼ 소스코드 살펴보기
1 : 스크롤바를 없애기 위한 소스
3 : content 요소의 높이를 전체 화면으로(뷰포트) 설정하기 위해 먼저 html 요소와 body 요소의 높이를 설정
6 : 단위의 기준은 부모인 html, body의 크기가 되므로 영역하나 가 전체 화면을 차지할 수 있다
9 : <h1> 요소가 .content 요소의 영역을 기준으로 배치가 되도록 포지션 값을 준다
12~14 : .content 요소의 영역을 기준으로 가운데 배치
21 : .content요소의 짝수의 배경을 바꿔서 영역을 보기 좋게 색상을 변경
JS
1. 기본 이벤트 제거
window.addEventListener("wheel", function(e){
e.preventDefault();
},{passive : false});▼ 소스코드 살펴보기
우리가 사용할 이벤트는 wheel이벤트인데, 휠을 굴렸을 때 스크롤이 되지 않도록 하려면
wheel의 기본 이벤트인 scroll를 제거를 해줘야 한다.
근데 여기서 패시브모드를 해제를 해야 한다고 한다.
패시브 모드? 해제? false?
패시브 모드?해제?false??
passive는 addeventListener() 옵션중에 1개이다
passive옵션은 true와 flase 값을 가지게 된다
flase인 경우 : preventDefault()를 이용해서 이벤트 자체를 막을 수 있기 때문에, 브라우저는 scroll를 계속할지 안할지를 매번 검사하게 된다. passive옵션의 기본값이다.
true인 경우 : 스크롤이벤트를 막지 않겠다! preventDefalt()를 사용할 수 없다.
기본이벤트를 제거를 해도 여전히 스크롤이 여전히 되고 오류가 발생이된다고 한다.
→ 이유는 패시브모드에서 동작하는 이벤트 이기 때문에
→ 그래서 패시브 모드를 끈 상태에서 기본이벤트를 제거를해야되는거다
2. 참조하는 요소 미리 탐색 및 선언
1 var $html = $("html");
2
3 var page = 1;
4
5 var lastPage = $(".content").length;
6
7 $html.animate({scrollTop:0},10);
8▼ 소스코드 살펴보기
3 : 뷰포트에 표시되는 페이지의 번호
5 : 마지막 페이지의 번호
7 : 문서(페이지)가 로드되면 첫 페이지 시작
3. 휠을 굴리면 다음 페이지, 이전 페이지
1 $(window).on("wheel", function(e){
2
3 if($html.is(":animated")) return;
4
5 if(e.originalEvent.deltaY > 0){
6 if(page== lastPage) return;
7
8 page++;
9 }else if(e.originalEvent.deltaY < 0){
10 if(page == 1) return;
11
12 page--;
13 }
14 var posTop = (page-1) * $(window).height();
15
16 $html.animate({scrollTop : posTop});
17
18 });
▼ 소스코드 살펴보기
1 : 이벤트 핸들러로 마우스 휠을 굴리면 발생하는 이벤트
3 : 아래에서 호출된 .animate 메서드로 생성된 스크롤 효과가 쌓이지 않도록 스크롤이 진행되는 동안 발생하는 wheel이벤트는 무시한다.
5, 9 : e(jQuery가 반환) .originalEvent(자바스크립트에서의 원래 이벤트) .deltaY(마우스 휠을 어느 방향으로 얼만큼을 굴렸는지 → 양수이면 아래쪽으로 굴린 거, 음수이면 위쪽으로 굴린 거다)
6 : 마지막 페이지인 경우에는 이벤트 핸들러 종료(스크롤될 것이 없으니 마지막에서 멈춰!!)
8, 12 : 스크롤을 아래로 했으면 페이지 +1, 위로 올렸으면 -1씩 시키기
10 : 첫 번째 페이지인 경우에도 이벤트 핸들러 종료(올라갈 곳이 없으니 첫 번째에서 멈춰!!)
14 : 이동할 페이지의 번호에 스크롤할 위치 계산
16 : 계산한 위치로 이동
'JavaScript' 카테고리의 다른 글
| [JavaScript] 캐러셀(Carousel) 슬라이더 기능 구현 (0) | 2023.04.19 |
|---|---|
| [JavaScript] localStorage란? (0) | 2023.04.18 |
| [JavaScript] 자바스크립트 객체, 내장 객체 정리 (1) | 2023.04.10 |
| [JavaScript] Audio Player 음악 플레이어 만들기 (0) | 2023.04.09 |
| [JavaScript] 엔터키 이벤트로 입력받기 (0) | 2023.04.08 |
댓글