[J-query] mousewheel이 크롬에서는 작동하지만 파이어폭스에서는 안되는 이유

크롬, 익스플로어, 사파리, 오페라는 mousewheel 이벤트를 지원하지만

파이어폭스는 DOMMouseScroll 이벤트를 지원한다.

그러므로 on() 메서드를 사용하여 둘 다 걸어주면 된다.

 

크롬에서 휠을 내리면 음수, 올리면 양수로 표현하곤 하는데 (익스도 동일)

재밌게도 파이어폭스는 반대이다

파이어폭스에서는 휠을 내리면 양수, 올리면 음수로 표현된다.

그러므로 우리는 이 부분을 신경써서 조건식을 사용해야 한다.

일단 이벤트가 어떻게 나오는지 살펴보자.

크롬 콘솔창에 찍었을 때 459번 라인에 WheelEvent가 나오고 이것을 펼치면 wheelDelta라는 속성을 찾을 수 있다.

크롬 이벤트

파폭 콘솔창에는 DOMMouseScroll이 나오고 이것을 펼치면 detail라는 속성을 찾을 수 있다.

파이어폭스 이벤트

 

필자는 E.detail이 있느냐 없느냐의 조건으로 다음과 같이 식을 세운 후 새로고침하니까 파폭에서도 작동이 되더라!