将鼠标滚轮/滚动事件从一个div转移到另一个div

Question

我想知道是否可能和如何将鼠标滚轮/滚动事件（用户滚动尝试）从header转移到container。

我有以下示例情况：

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

情况

情境2是可以滚动整个页面的“传统”设置。当光标悬停标题时（即使它可能已修复），滚动尝试将传递给body / html。由于容器溢出body / html，如果用户旋转他/她的鼠标滚轮，容器将移动/滚动。由于标题是固定的，它将保持在同一位置。

情况1是我的测试设置。容器的内容溢出容器，这将导致容器显示滚动条。现在我希望容器在用户的光标悬停在标题上并且用户旋转他/她的滚轮时也会滚动。

更新1

situation 1

的jsfiddle

situation 2

的jsfiddle

更新2

我创建了另一个fiddle来显示我的进展，这可能是解决方案，但我无法让它发挥作用。这可能会激励其他人获得实际的解决方案:) 我收到错误：(index):69 Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. （现在它只是chrome中的滚动事件）

更新3

This最接近我预期的解决方案，该解决方案基于“其他解决方案2”。感谢Maksym Stepanenko的研究，它似乎还不可能。我暂时没有回答这个问题，以防有人找到方法：）

其他解决方案

这些问题讨论了这个问题，但没有像我希望的那样为这种设置提供解决方案：

• 1. 这样做无济于事，因为标题不会放在容器上方而是放在容器上方。 HTML & JavaScript - Passing the scroll action from one element to another
• 1. 接受的答案不会转移事件，只是设置了scrollTop。这不是浏览器在滚动时提供的行为。您可以清楚地看到jsFidle在悬停元素时滚动发生的方式或正常执行滚动时的差异。浏览器使滚动平滑，scrollTop只设置值使其“震惊”。然而，除了'震撼'部分，这非常接近我想要的行为！ Pass mousewheel event through fixed content

Answer 1

我最终也需要这个功能。

如果您正在收听“wheel”事件，则可以获得有关滚动的“delta”信息。然后，您只需将delta应用于目标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;
  });
});

我没有在手机上测试过这个，但我怀疑它不适用于那里。

Answer 2

经过几个小时的研究，这是我能找到的。

1. 您实际上无法调度浏览器对事件的默认反应（例如滚动），因为它在调度事件之前发生。类似的东西被解释为here。

2. dispatchEvent的作用 - 实际上是触发javascript中实现的处理程序的事件。例如Fiddle

3. 你唯一的跨浏览器方式是scrollTop有或没有不同的缓动（如jquery animate）。因为甚至调度滚动事件对FF和其他浏览器的工作方式也不同。

希望它有所帮助。

更新1

我发现this post表示您可以在Firefox中实际模拟滚动事件，但我无法使其正常工作。

Answer 3

如果您试图在iframe中捕获mousewheel事件并将其发送给父级，这就是我的工作方式。

在iframe中加载的页面中，我放置了一个带有ID =“ everything”的DIV，该DIV包围了页面的整个主体

然后，在iframe中加载的页面底部插入此脚本。

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

然后在父母中，我不得不在顶部附近插入此脚本

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

}

这会将车轮滚动捕获到iframe中，并将事件推送给父级。