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

Question

我想知道是否可能以及如何从header传输鼠标滚轮/滚动事件(用户滚动尝试) > 到容器。

我有以下示例情况:

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

---

情况

---

情况 2 是可以滚动整个页面的“传统”设置。当您的光标悬停在标题上时(即使它可能已修复)，滚动尝试也会传递到 body/html。由于容器溢出 body/html，如果用户旋转他/她的鼠标滚轮，容器将移动/滚动。因为 header 是固定的，所以它将保持在相同的位置。

情况 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中的scroll事件)

更新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”信息。然后您可以简单地将增量应用到您的目标 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;
  });
});

不过，我还没有在移动设备上测试过它，我怀疑它不会在那里工作。