마우스휠 사용 시 JS 휠 이벤트 소개_javascript 기술

일반적인 응용 프로그램에서는 마우스 휠을 스크롤하여 그림이나 텍스트의 크기를 제어합니다. 예를 들어 Mousewheel 이벤트는 확대/축소를 위해 마우스 휠을 회전하는 것과 같은 대화형 효과에 사용됩니다. 대부분의 브라우저(IE6, IE7, IE8, Opera 10, Safari 5)에서는 "mousewheel" 이벤트가 제공됩니다. 스크롤 휠 이벤트의 호환성 차이는 다소 절충적입니다. 과거의 IE8 파티와 다른 파티는 아니지만 Firefox 3.5에서는 이 이벤트를 지원하지 않지만 다행히 Firefox 3.5에서는 또 다른 이벤트를 제공합니다. 해당 이벤트: "DOMMouseScroll", 호환 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// isFirefox는 의사 코드이므로 직접 구현할 수 있습니다.
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

"mousewheel의 "event.wheelDelta" 속성 값 " 이벤트: 반환값, 양수이면 스크롤 휠이 위로 스크롤된다는 의미, 음수이면 스크롤 휠이 아래로 스크롤된다는 의미, 반환값은 모두 120의 배수, 즉, 진폭 = 반환 값 / 120입니다.
"DOMMouseScroll" 이벤트의 "event.detail" 속성 값: 반환된 값입니다. 음수 값인 경우 휠이 위쪽으로 스크롤된다는 의미입니다("event.wheelDelta"와 정반대). 양수 값은 휠이 아래로 굴러가는 것을 의미합니다. 반환된 값은 모두 3의 배수입니다. 즉, 진폭 = 반환된 값/3입니다.
"mousewheel" 이벤트는 Opera 10의 특별한 경우입니다. 이 이벤트에는 "event.wheelDelta" 속성과 "event.detail" 속성이 모두 있습니다.