스크롤 휠 이벤트 캡처

사용자가 페이지를 스크롤 할 수 없거나 스크롤 할 수없는 상황에서 스크롤 휠을 스크롤 할 때 이벤트를 캡처하고 싶습니다. 그러나 표준 JS 스크롤 이벤트는 브라우저가 실제로 스크롤 할 때만 시작되며 오버플로가 숨겨진 스타일의 DOM 요소에 대해서는 실행되지 않습니다.스크롤 휠 이벤트 캡처

Google지도의 '스크롤하여 확대/축소'는 내가 찾고있는 행동 유형의 예입니다.

누구나 이런 식으로 달성하는 방법을 알고 있습니까?

감사합니다.

출처

2012-11-08 Zev

Firefox 및 Chrome에서 작동합니다. ** 라이브 데모 : ** http://jsfiddle.net/chtNP/1/ –

버전에 따라 IE 나 Opera에서 잘 작동하지 않습니다 (http://www.adomas.org/javascript- 마우스 휠 /) – Kelvin

@KelvinMackay 나는 IE9와 IE8에서 테스트를 해봤 다. –

... 가능하지만 더 이상의 브라우저에서 작동 얻을하고자 할 때 고통의 세상을 위해 자신을 준비 잘 -wheel 이벤트 :

$('#yourElement').on('DOMMouseScroll mousewheel', function() { 
    ... 
});

라이브 데모 : http://jsfiddle.net/chtNP/1/

(. 내가 이벤트 처리기를 바인딩 jQuery를 사용하고 있지만, 상관없이 당신은 물론, 사용하는 API의 작동)

출처

2012-11-08 01:51:29

완벽합니다. 감사합니다. 나는 그 사건에 대해 몰랐으며 내 인터넷 검색에서 그것을 놓쳤을 것입니다. – Zev

사용자가 위 또는 아래로 스크롤하고 있는지 확인할 수 있습니까? –

@RobinCastlin 예. scroll 이벤트는이를위한 속성을 제공합니다. 이 방법은 여러 가지가 있지만 브라우저간에 값을 얻기 위해 if-else 코드를 작성해야합니다. –

jQuery를 사용하면 this plugin 또는 동일한 작업을 수행하는 비슷한 수를 사용할 수 있습니다.

jQuery를 또는 이와 유사한 프레임 워크가 옵션이 아닌 경우, 그것은 당신이 마우스를 캡처 할 수 있습니다

출처

2012-11-08 01:47:35 Kelvin

jQuery없이 구현하는 데 많은 시간이 걸립니다 (내가했던 것처럼). 그러나 나는 그것을 고통의 세계라고 부르지 않을 것입니다. 특히 당신이 단지 내 솔루션을 붙여 넣기 만하면됩니다. – Rolf

현재 Firefox는 DOMMouseScroll 및 휠 이벤트를 정의합니다. Chrome, Opera 및 IE (최신,)는 마우스 휠을 정의합니다.

이

내가 그것을 어떻게입니다 : 오래된 IE 버전 또는 addEventListener 지원이 polyfill을 필요로

if(window.onwheel !== undefined) { 
    window.addEventListener('wheel', onMouseWheel) 
} else if(window.onmousewheel !== undefined) { 
    window.addEventListener('mousewheel', onMouseWheel) 
} else { 
    // unsupported browser 
}

하는 것으로. 또는 이전 window.mousewheel = function() {} 또는 다른 방법을 사용할 수 있습니다.

보시다시피 이벤트 리스너는 윈도우 객체에 첨부됩니다. 크로스 브라우저 방식으로 요소에 첨부 할 수 없습니다. 이벤트 객체 대상 속성을 사용하여 트리거 된 위치를 확인하고 그 기준에 따라 필터를 수행 할 수 있습니다.

추신 : IE에서 콜백 함수 ("onMouseWheel")에서 처리 할 때 IE에서 이벤트 개체 내에서 "wheelDelta"속성을 사용하고 기호를 반전시켜야합니다. 다른 브라우저는 "deltaY"(가로 스크롤의 경우 "deltaX")를 채 웁니다.

출처

2013-12-09 17:45:32 Rolf

스크롤 휠 이벤트 캡처

답변

관련 문제