728x90
반응형
마우스 휠이벤트로 섹션 이동으로 스크롤링 페이지 만들어봐요
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
<style>
section{
height:100vh;
}
</style>
</head>
<body>
<section style="background-color: aqua; height: 100vh">1</section>
<section style="background-color: aquamarine; height: 100vh">2</section>
<section style="background-color: bisque; height: 100vh">3</section>
<section style="background-color: burlywood; height: 100vh">4</section>
<section style="background-color: coral; height: 100vh">5</section>
<section style="background-color: bisque; height: 100vh">6</section>
<section style="background-color: burlywood; height: 100vh">7</section>
<section style="background-color: coral; height: 100vh">8</section>
</body>
</hrml>window.onload = function () {
const elm = document.querySelectorAll("section");
const elmCount = elm.length;
elm.forEach(function (item, index) {
item.addEventListener("mousewheel", function (event) {
event.preventDefault();
let delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) delta = -event.detail / 3;
let moveTop = window.scrollY;
let elmSelector = elm[index];
// wheel down : move to next section
if (delta < 0) {
if (elmSelector !== elmCount - 1) {
try {
moveTop =
window.pageYOffset +
elmSelector.nextElementSibling.getBoundingClientRect().top;
} catch (e) {}
}
}
// wheel up : move to previous section
else {
if (elmSelector !== 0 && elmSelector.id !== "home") {
try {
moveTop =
window.pageYOffset +
elmSelector.previousElementSibling.getBoundingClientRect().top;
} catch (e) {}
}
}
const body = document.querySelector("html");
window.scrollTo({ top: moveTop, left: 0, behavior: "smooth" });
});
});
};
다른 버전
const wrap = document.getElementsByClassName('wrap')[0]; // 보일 영역
const container = document.getElementsByClassName('container');
let page = 0; // 영역 포지션 초기값
const lastPage = container.length - 1; // 마지막 페이지
window.addEventListener('wheel',(e)=>{
e.preventDefault();
console.log(e.deltaY )
if(e.deltaY > 0){
page++;
}else if(e.deltaY < 0){
page--;
}
if(page < 0){
return page=0;
}else if(page > lastPage){
return page = lastPage;
}
console.log(e.deltaY)
wrap.style.top = page * -100 + 'vh';
},{passive:false}); // 디폴트 기능 제거 - 스크롤
보너스 토클 드롭다운 메뉴 만들기
<div class="appdown">
<button type="button" class="main-down-link">
토클버튼
</button>
<div class="toggle__wrap">
<ul>
<li>
<a href="#" target="_blank">
메뉴1
</a>
</li>
<li class="hr-item">
<hr class="divider_hr"/>
</li>
<li>
<a href="#" target="_blank">
메뉴2
</a>
</li>
</ul></div>
</div> const toggles = document.querySelector('.main-down-link');
const togglestarget = document.querySelector('.toggle__wrap');
toggles.addEventListener('click',(e)=>{
if(togglestarget.classList.contains('-active')){
togglestarget.classList.remove('-active')
}else{
togglestarget.classList.add('-active')
}
})
2024.02.25 - [공부하기] - 모바일 버전 섹션이동
모바일 버전 섹션이동
2024.02.17 - [공부하기] - 마우스 휠이벤트로 섹션 이동하기 마우스 휠이벤트로 섹션 이동하기 마우스 휠이벤트로 섹션 이동으로 스크롤링 페이지 만들어봐요 html 1 2 3 4 5 6 7 8 window.onload = function ()
nani-mei.tistory.com
728x90
반응형
'공부하기' 카테고리의 다른 글
| 자바스크립트 성능 최적화 (80) | 2024.02.28 |
|---|---|
| 모바일 버전 섹션이동 (95) | 2024.02.25 |
| 접근성 관련 자주 묻는 질문! (89) | 2024.02.14 |
| 접근성 관련 자주 묻는 질문! (77) | 2024.02.13 |
| 접근성 관련 자주 묻는 질문! (104) | 2024.02.08 |
