Forwarding mouse scroll event to another div using JavaScript

Question

The title pretty much describes my objective. Here is the code [works only on WebKit]:

We have two divs, elem1 & elem2. There is also one textbox called logger to display result. elem1 has some text with 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

[Mouse wheel scroll on blue div is supposed to be forwarded to pink div. The textbox on top shows the result.]

As you can see, even though mousewheel event from elem2 triggers the same on elem1, unfortunately the content inside elem1 does not not actually scroll.

I am quite perplexed. Can anyone help ? You don't have to worry about the not working in Gecko part. The constructor trick does not work in Gecko, so the code will be somewhat larger. That's why I did not include that in the fiddle.

Edit: In Chrome this fiddle works just like I want it to. So I updated the code to support Gecko. Unfortunately Firefox behaves just like Safari. The forwarded event is firing, I can see it in log textbox, but the contents are not scrolling. Here is the updated fiddle: http://jsfiddle.net/s4hwt886/2/

N.B. I want a non-Jquery solution. All other similar threads that I could find deal with Jquery.

Tincal

Your fiddle works for me. – Handclap

You are right about FF. – Handclap

I know this is a crap answer but FF does have trouble supporting the mousewheel events. I suggest you use the scrollTo instead, which has greater support across browsers. quirksmode.org/dom/events/scroll.html – Handclap

is scrollto an event? Is not it a method? – Tincal

In my project, scrollTo was required as well, but sadly I could not get it to work. ALso, I contacted the #JS IRC channel of MDN,and failed to get any response. Why is it so tough to learn about basic JS functionality? How do the developers of JQuery learn about these things? – Tincal

I think I will look into Gecko documentation, hopefully there is some documentation less obscure than the last option: source code. – Tincal

Isn't jQuery an option? – Handclap

Another solution would be apply the height of div1 onto div2 (you can hide scrollbars with css), scroll div2, get the scrolled distance and apply the scrolled distance to div1? That's what I meant by using scrollTo. – Handclap

Your solution will restrict the freedom of design style of an webpage. It will work for the fiddle I provided, but not in other scenarios, suppose a sticky header or menu. – Tincal

Actually, I think I should stop ignoring JQuery. If I knew what JQuery method could do what I seek to do, it would have been as easy as looking into the uncompressed JQuery.js to find out the solution that works in FF. Right now I am busy with some system debugging issue, hopefully soon I will have a chance to return to web development and try out JQuery. – Tincal

would be cool if you could share what solution you came up with – Meemeece

@RobinF. Well, I switched to JQuery. Maintaining browser compatibility on low-level JS code is hard. Firefox has already switched to a new engine, therefore all my work would have been wasted anyway. – Tincal

I tried in 2024 on jsfiddle and you code don't scroll Element1 when scrolling mouse on Element 2. I write this comment now because first comments are wroten that your code worked for them. In 2024, for me, this is not the case and I regret to not finding a solution for mouse scroll (mouseWheel) but also for scrolling using vertical bar. – Granlund