[JavaScript/VanillaJS] 마우스 휠 이벤트 (a.k.a window.onmousewheel)

포스팅에 앞서 링크 하나를 적고 시작하겠습니다.

https://sellery.me

Sellery

 

직장인이 알아두면 좋을 법한 웹 앱입니다.

이 웹 앱을 보며 저도 존버를 하고 있습니다. (언제쯤 퇴사를.. 웁웁..!)

 

보다보니 라이브러리없이 Vanilla JS로만 클론코딩을 해보고 싶은 마음이 들었습니다. (비전공개쪼렙신입개발자햇병아리라서 성장해야한다..!)

 

클론코딩을 시작해보자 마음먹고 실천에 옮기자마자 난관에 부딪혔는데

휠만으로 페이지 전환이 되길래 신기해서 좀 뜯어봤는데 페이지 전환이 아니라 div 이동이었습니다.

(차라리 페이지 전환인게 마음은 편할 것 같다ㅠㅠ)

 

흠.. 클론코딩을 끝내고 포스팅을 하는게 아니라!

 

중간 중간 잊지말자는 의미로

양도 적고 시덥잖고 금방 훑고 지나갈 수 있는 포스팅을 하긴 하지만 부족한 것이 느껴지면 가감없이 클론코딩을 중단하고 부족한 부분을 채우고 돌아올 생각입니다.

 

 

sellery-clone의 test.js

 

 

console.dir에 빨간 네모를 해둔 이유는 정말 log만큼 나에게 많은 것을 알려주는 고마운 녀석이라 강조 표시를 했습니다.

 

저 인자로 뭐가 들어오는지 console.log로 봤다면 이 인자가 무엇을 갖고 있는지는 console.dir로 확인할 수 있습니다.

(log로도 충분히 확인할 수 있다...)

 

사실 지금도 휠로 div를 이동하는 것은 완성 못했습니다..

구글링을 하면 jQuery로 복붙해도 될 정도로 잘 설명된 자료는 곧 잘 봤는데

라이브러리없이 하려니 막막하네요.

 

일단 document엔 onmousewheel이 없나보다 vscode에서 ctrl + space를 하면 안나온다!

window엔 나온다! 고맙게도.

 

console.dir(event)

wheel event를 console.dir로 보면 onmousewheel에 담긴 자식들을 확인할 수 있습니다.

jQuery로 div 이동하는 자료들을 참고하다가 보니 Delta란 녀석을 찾았고

확인차 if조건문으로 확인하였습니다.

if(e.wheelDelta === -120){
  console.log('wheel down');
} else {
  console.log('wheel up');
}

이 조건문을 걸고 브라우저(크롬)에서 확인했습니다.

 

test result

흐흐~

만족스럽다.

 

Vanilla JS 만으로 wheel event를 사용하여 div 이동하기에 한걸음 더 나아갔습니다.

 

jerry는 성장중.

(우웩- 멘트 역겹다. ㅇㄱㄹㅇ)