html5에서 마우스 휠을 스크롤할 때 실행되는 스크립트의 onmousewheel 이벤트

WheelEvent Firefox와 같은 브라우저에서는 DOMMouseScroll을 사용하고, ff에서는 addEventListener 메서드를 사용하여 DomMouseScroll 이벤트를 바인딩할 수 있으며, 다른 브라우저에서는 휠 이벤트에 대해 마우스휠을 사용합니다. 세부 사항.

Firefox는 DOMMouseScroll을 사용하고, 다른 브라우저는 마우스휠을 사용합니다. 스크롤 이벤트가 발생하면 Firefox는 휠 정보를 캡처하기 위해 디테일 속성 을 사용하고 다른 브라우저는 휠Delta를 사용합니다. 왜 다른 제조업체가 이 문제에 대해 Microsoft와 일관성을 유지하는지 모르겠습니다. Firefox는 addEventListener 메소드를 사용하여 DomMouseScroll 이벤트를 바인딩할 수 있습니다.

elem.addEventListener('DOMMouseScroll', func, false) IE 및 기타 주류 브라우저는 전통적인 이벤트 바인딩 모델을 사용할 수 있습니다. 그러나 IE의 독점적인 attachmentEvent 메소드를 사용하지 마십시오. 다른 주류 브라우저는 Microsoft의 메소드를 인식하지 않습니다.

Firefox 마우스 휠 위로 스크롤은 -3, 아래로 스크롤은 3

IE 마우스 휠 위로 스크롤은 120, 아래로 스크롤은 -120

Safari 마우스 휠 위로 스크롤은 360, 아래로 스크롤은 -360

오페라의 마우스 휠 최대 120까지 스크롤하고 -120까지 아래로 스크롤

Chrome의 마우스 휠은 최대 120까지 스크롤하고 -120까지 아래로 스크롤됩니다.

누군가 Safari에서 몇 가지 테스트를 했습니다. "원만 스크롤하면 값은 +-0.1입니다. , 조금 더 빠르게 스크롤하면(몇 번 더 스크롤) 이 값도 커지게 됩니다. 이는 Mac OS에서 마우스 휠 가속 기능이 있기 때문입니다. 한 번 스크롤하면 브라우저는 1픽셀씩 스크롤하고 3번 스크롤합니다. . 브라우저는 30픽셀을 스크롤합니다." 동시에 그는 Camino(Gecko 기반 커널 엔진)에 대한 연구도 수행했습니다. "Safari와 유사합니다(+- 0.3 ~ +-Infinity). Firefox와 동일한 커널 엔진을 사용하지만 델타 값은 + -2.666666 Float, 스크롤 속도에 관계없음

테스트 결과 IE/Opera는 동일한 유형이며, 휠 이벤트를 추가하기 위해 attachmentEvent를 사용할 수 있습니다.

/*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

위 내용은 html5에서 마우스 휠을 스크롤할 때 실행되는 스크립트의 onmousewheel 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!