Geek Answers Handbook

Passing a mousewheel / scroll event from one div to another

I would like to know if possible and how to pass the mouse / scroll event (scroll headerthrough user attempts) from to container.

I have the following situations:

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

Situations

Situation 2 is a “traditional” setting in which you can scroll the entire page. When your cursor hovers over the title (although it may be fixed), the scrolling attempt is passed along with the / html body. Since the container overflows the body / html, the container will move / scroll if the user turns his wheel. Since the title is corrected, it will remain in the same position.

1 - . , . , , , .

1

a jsfiddle 1

a jsfiddle 2

2

fiddle, , , . - :) : (index):69 Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. ( )

3

, "Other Solution 2". . , - :)

, , , :

+4
3

, .

  • (, ), . - .

  • dispatchEvent - , javascript. Fiddle

  • - - scrollTop (, jquery). - FF .

, .

1

, , Firefox, .

+1

.

"", "" . 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;
  });
});

, , .

+1

mousewheel iframe , , .

, iframe, DIV id = "everything", .

, iframe, .

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


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

}

iframe .

0
source

More articles:


All Articles