js(firefox 멀티브라우저)_javascript 기술의 마우스 휠 이벤트에 대한 자세한 설명

첨부된 이벤트

테스트 결과, 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만 취합니다. 여기서 양수는 위쪽과 음수를 나타냅니다. 숫자는 아래쪽을 나타냅니다.

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

스크롤 값:(IE/Opera)

스크롤 값: (Firefox)

스크롤 휠 값 효과 -http://www.jb51.net/ <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title>