HTML에서 마우스 휠의 마우스 휠 이벤트를 처리하는 방법

스크롤 휠 이벤트는 브라우저마다 약간 다릅니다. Firefox와 같은 브라우저에서는 addEventListener 메서드를 사용하여 DomMouseScroll 이벤트를 바인딩할 수도 있습니다.

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

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

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

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

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

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

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

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

테스트해본 결과 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

세부 사항 및 휠델타

스크롤 휠이 위인지 아래인지 확인하려면 이제 브라우저에서도 호환성을 고려해야 합니다. 5개 주요 브라우저(IE, Opera, Safari, Firefox, Chrome) Firefox는 세부 정보를 사용하고 나머지 4개 범주는 휠델타를 사용합니다. 두 범주는 값이 일치하지 않습니다. 즉, 세부정보는 동일하며 휠델타는 2개만 사용합니다. 값은 각각 ±3 이고, 휠델타(wheelDelta)는 ±120 뿐입니다. 여기서 양수는 위쪽을 나타내고 음수는 아래쪽을 나타냅니다.