마우스 휠로 전체 페이지 영역 넘기기
지난번 마우스 휠로 input 넘버 값 up, down 작업을 했었다.
응용해서 작업 하나 더 했는데 올린다.
HTML
<div class="box1">박스1입니다.</div>
<div class="box2">박스2입니다.</div>
<div class="box3">박스3입니다.</div>
<div class="box4">박스4입니다.</div>
<div class="box5">박스5입니다.</div>
<div class="box6">박스6입니다.</div>
<div class="box7">박스7입니다.</div>
박스 7개 생성.
몇 개를 생성해도 상관없다.
하지만 구분을 위해 class로 css 추가했기 때문에 구분을 위한다면 똑같이 추가할 것.
CSS
body,div{
margin:0;
padding:0;
}
div{
display: flex;
align-items: center;
justify-content: center;
}
.box1{background-color:red;}
.box2{background-color:orange;}
.box3{background-color:yellow;}
.box4{background-color:green;}
.box5{background-color:blue;}
.box6{background-color:navy;}
.box7{background-color:purple;}
JS 수정 전
const _width = window.innerWidth;
const _height = window.innerHeight;
const boxArr = document.getElementsByTagName('div');
for(let i = 0; i < boxArr.length; i++){
boxArr[i].style.width = _width + 'px';
boxArr[i].style.height = _height + 'px';
}
window.addEventListener('mousewheel', function(e){
e.preventDefault();
if(e.wheelDeltaY > 0){
console.log('업');
window.scrollTo(0,window.scrollY - _height);
}else{
console.log('다운');
window.scrollTo(0,window.scrollY + _height);
}
});
전체 페이지로 만들기 위해 window 크기 값을 가져와서 _width, _height 변수로 만들었다.
반복문으로 각각에 _width, _height값을 주어 전체 페이지로 만들고
그 다음 마우스 휠 이벤트를 바인딩 해줬다.
마우스 휠 기본 이벤트를 막고 up, down 분기 코드로 현재 scrollTop위치에 박스 height 값을 더하거나 뺀 뒤 scrollTop 값이 되도록 했다.
+ mousewheel 이벤트는 예전에 브라우저 호환성 확인 안하고 작성한 스크립트를 가져다 썼기 때문에 호환이 안 될 수 있다.
JS 수정내역!!
위의 js로 스크롤하게되면 스크롤하는 영역이 더해져서 (100px정도) 내가 원하는 페이지에 딱딱 안 멈추고 100px정도씩 어긋나는것이 확인된다.
따라서 window.scrollTo()에 들어가는 값에 스크롤 시 마다 내려가는 e.deltaY값을 빼줘야한다!
아래가 최종이다...
근데 연속적으로 마우스 휠을하면 에러가 생기는데, jquery에서는 queue에 하나씩 들어가도록 stop()?메소드가 있는데, 아직 js는 모르겠다.
찾아서 다시 수정해야겠다..
JS 최종
const _width = window.innerWidth;
const _height = window.innerHeight;
const boxArr = document.getElementsByTagName('div');
for(let i = 0; i < boxArr.length; i++){
boxArr[i].style.width = _width + 'px';
boxArr[i].style.height = _height + 'px';
}
window.addEventListener('mousewheel', function(e){
e.preventDefault();
if(e.wheelDeltaY > 0){
console.log('업');
window.scrollTo(0,window.scrollY - _height - e.deltaY);
}else{
console.log('다운');
window.scrollTo(0,window.scrollY + _height - e.deltaY);
}
});
[예제]
영역 안에서 마우스 휠을 업, 다운 해보도록!
See the Pen ePLmzp by leeyoonseo (@okayoon) on CodePen.
