JavaScript를 사용하여 마우스 스크롤 이벤트를 다른 div로 전달

Question

제목이 내 목표를 거의 설명합니다. 다음은 [WebKit에서만 작동하는] 코드입니다.

우리는 두 개의 div, elem1 & elem2가 있습니다. 결과를 표시하는 logger라는 텍스트 상자도 있습니다. elem1에는 overflow : scroll이라는 텍스트가 있습니다.

function eventHandler(e){ 
    var myEvt = new e.constructor(e.type, e); 
    document.getElementById('elem1').dispatchEvent(myEvt); 
} 

function elem1MouseScroll(e){ 
    document.getElementById('logger').value='mousescroll on ' + (e.target || e.srcElement).id + ' at (' + e.clientX + ', ' + e.clientY + ')'; 
} 

document.getElementById('elem1').addEventListener('mousewheel', elem1MouseScroll, false);    
document.getElementById('elem2').addEventListener('mousewheel', eventHandler, false);  

블루 사업부에

http://jsfiddle.net/s4hwt886/1

[마우스 휠 스크롤

은 분홍색 사업부에 전달 될 예정이다. 상단의 텍스트 상자에 결과가 표시됩니다.] 보시다시피, elem2의 마우스 휠 이벤트가 elem1에서 동일하게 트리거 되더라도, 안타깝게도 elem1의 내용은 실제로 스크롤되지 않습니다.

나는 꽤 당황 스럽다. 누구든지 도와 줄 수 있습니까? Gecko 파트에서 작동하지 않는 것에 대해 걱정할 필요가 없습니다. Gecko에서는 생성자 트릭이 작동하지 않으므로 코드가 다소 커집니다. 그래서 바이올린에 포함시키지 않았습니다.

편집 : Chrome에서이 피들은 내가 원하는 것처럼 작동합니다. 그래서 Gecko를 지원하도록 코드를 업데이트했습니다. 불행하게도 Firefox는 Safari와 같이 작동합니다. 전달 된 이벤트가 실행 중입니다. 로그 텍스트 상자에서 볼 수 있지만 내용이 스크롤되지 않습니다. 다음은 업데이트 된 바이올린입니다. http://jsfiddle.net/s4hwt886/2/

N.B. 비 Jquery 솔루션을 원한다. 다른 비슷한 스레드는 Jquery를 처리 할 수 ​​있습니다.

Answer 1

귀하의 바이올린은 크롬에 설명 된대로 작동하는 것 같습니다.