첨부된 이벤트
테스트 결과, IE/Opera는 동일한 유형이며, AttachEvent를 사용하여 휠 이벤트를 추가할 수 있습니다.
/*IE 등록 이벤트*/
if( document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
Firefox는 addEventListener를 사용하여 스크롤 휠 이벤트를 추가합니다
/*Firefox 등록 이벤트*/
if(document.addEventListener) {
document.addEventListener( 'DOMMouseScroll',scrollFunc,false);
}
Safari와 Chrome은 동일한 유형이며 HTML DOM을 사용하여 이벤트를 추가할 수 있습니다.
window.onmousewheel=document.onmousewheel=scrollFunc;/ /IE/Opera/Chrome
Firefox를 제외한 나머지는 모두 HTML DOM을 사용하여 이벤트를 추가할 수 있으므로 다음 방법으로 이벤트를 추가하세요
/*이벤트 등록*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
세부정보 및 휠Delta
스크롤 휠이 위인지 아래인지 판단합니다. 브라우저에서도 호환성을 고려해야 합니다. 5가지 주요 브라우저(IE, Opera, Safari, Firefox, Chrome) 중 Firefox는 세부 정보를 사용하고 나머지 4개는 세부 정보를 사용합니다. 휠델타(wheelDelta)를 사용하면 값이 일치하지 않습니다. 이는 의미가 동일하다는 것을 의미합니다. 디테일과 휠델타는 각각 두 개의 값만 취하고 디테일은 ±3만 취하고 휠델타는 ±120만 취합니다. 여기서 양수는 위쪽과 음수를 나타냅니다. 숫자는 아래쪽을 나타냅니다.