마우스 휠로 전체 페이지 영역 넘기기

마우스 휠로 전체 페이지 영역 넘기기

지난번 마우스 휠로 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.