728x90
반응형
2024.02.17 - [공부하기] - 마우스 휠이벤트로 섹션 이동하기
마우스 휠이벤트로 섹션 이동하기
마우스 휠이벤트로 섹션 이동으로 스크롤링 페이지 만들어봐요 html 1 2 3 4 5 6 7 8 window.onload = function () { const elm = document.querySelectorAll("section"); const elmCount = elm.length; elm.forEach(function (item, index) { item
nani-mei.tistory.com
지난 휠 이벤트에 이은 모바일 버전 섹션이동입니다.
터치 시작 값과 끝 값의 연산 값으로 위 아래 방향을 인식하여 움직이게 됩니다.
<!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 src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<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>
script
let point;
let pointend;
let value;
$('.container').on("touchstart", function (e) {
e.originalEvent.touches[0].pageX
e.originalEvent.touches[0].pageY
point = e.originalEvent.touches[0].pageY;
// e.originalEvent.changedTouches[0] 는 사용 불가!
console.log('start',point)
})
$('.container').on("touchmove", function (e) {
e.originalEvent.touches[0].pageX
e.originalEvent.touches[0].pageY
e.originalEvent.changedTouches[0].pageX
e.originalEvent.changedTouches[0].pageY
// 둘 다 사용 가능!
console.log('move')
})
$('.container').on("touchend", function (e) {
e.originalEvent.changedTouches[0].pageX
e.originalEvent.changedTouches[0].pageY
// e.originalEvent.touches[0] 는 사용 불가!
pointend = e.originalEvent.changedTouches[0].pageY;
console.log('end',pointend)
value = point - pointend
calPosition(value)
})
let page=0;
const wrap = document.getElementsByClassName('wrap')[0];
function calPosition(pointvalue){
const headers = document.querySelector('.headers');
const elm = document.querySelectorAll(".container");
if(pointvalue>0){
console.log('위로')
page++
}else{
console.log('아래')
page--;
}
if(page < 0){
return page=0;
}else if(page > elm.length -1 ){
return page = elm.length -1 ;
}
wrap.style.top = page * -100 + 'vh';
console.log(page)
}
728x90
반응형
'공부하기' 카테고리의 다른 글
| 인지된 성능 (95) | 2024.02.28 |
|---|---|
| 자바스크립트 성능 최적화 (80) | 2024.02.28 |
| 마우스 휠이벤트로 섹션 이동하기 (88) | 2024.02.17 |
| 접근성 관련 자주 묻는 질문! (89) | 2024.02.14 |
| 접근성 관련 자주 묻는 질문! (77) | 2024.02.13 |
