Transfer A Mousewheel/scroll Event From One Div To Another

I would like to know if it's possible and how to transfer a mousewheel/scroll event (scroll attempt by a user) from the header to the container. I have the following example situat

Solution 1:

I ended up needing this functionality as well.

If you're listening to the "wheel" event, you can get "delta" info about the scrolling. Then you can simply apply the delta to your target div.

document.addEventListener('DOMContentLoaded', function() {
  const target = document.querySelector('#container');

  // listen on the whole document; you could restrict this to an element though
  document.addEventListener('wheel', function(event) {
    target.scrollTop += event.deltaY;
  });
});

I haven't tested this on mobile, though, and I suspect it wouldn't work there.

Solution 2:

After hours of researching this is what I could find.

1. You can't actually call the browsers default reaction to the event( e.g. scroll) as it happens before the event is dispatched. Something similar is explained here.

2. What dispatchEvent does - is actually triggering the event for handlers implemented in javascript. e.g. Fiddle

3. Your only cross-browser way of doing this is the scrollTop with or without different easings (like jquery animate). As even dispatching scroll events works differently for FF and other browsers.

Hope it helps.

Update 1

I found this post which states you can actually simulate the scroll event in Firefox but i could not make it work.

Solution 3:

If you are trying to trap the mousewheel event in an iframe and send it to the parent, this is how I got it to work.

In the page that is loaded in the iframe I placed a DIV with the id="everything" that encased the whole BODY of the page

Then, in the bottom of the page that is loaded in the iframe insert this SCRIPT.

 document.getElementById("everything").addEventListener("mousewheel", function (e) {
    parent.scrollme(e.deltaY);
});

then in the parent, I had to insert this SCRIPT near the top

function scrollme( i ){
 window.scrollTo(window.scrollX, window.scrollY + i);

}

This traps the wheelscroll in the iframe and pushes the event to the parent instead.