CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dex
Dex

Reputation: 744

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 situations:

+------------+     +------------+|
|   header   |     |   header   ||
+------------+     +------------+|
|           ||     |            ||
|           ||     |            ||
| container ||     | container  ||
|           ||     |            ||
|           ||     |            ||
+------------+     +------------+|
 situation 1        situation 2

Situations

Situation 2 is the 'traditional' setup in which the complete page can be scrolled. When your cursor hovers the header (even though it might be fixed) the scroll attempt is passed along to the body/html. Since the container overflows the body/html the container will move/scroll if a user rotates his/her mousewheel. Because the header is fixed it will stay at the same position.

Situation 1 is my test setup. The container's content overflows the container which will cause the container to show a scrollbar. Now i'd like for the container to also scroll when a user's cursor is hovering the header and the user rotates his/her scrollwheel.

Update 1

a jsfiddle of situation 1

a jsfiddle of situation 2

Update 2

I've created another fiddle to show my progress in which may lie the solution, only I can't get it to work. This might inspire someone else to get the actual solution :) I get the error: (index):69 Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. (For now it's only the scroll event in chrome)

Update 3

This comes closest to my expected solution which is based on 'Other Solution 2'. Thanks to Maksym Stepanenko's research it does not seem to be possible yet. I leave the question unanswered for now in case someone does find a method :)

Other solutions

These questions talk about this issue but don't provide a solution for this setup the way I'd expect it to work:

Upvotes: 10

Views: 6174

Answers (3)

GraspSoftwareCorp
GraspSoftwareCorp

Reputation: 43

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.

Upvotes: 0

zjm
zjm

Reputation: 51

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.

Upvotes: 5

Max Novich
Max Novich

Reputation: 1169

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.

Upvotes: 3

Related Questions