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

Question

我想知道是否可以以及如何将鼠标滚轮/滚动事件（用户尝试滚动）从header 传输到@987654329 @。

我有以下示例情况：

+------------+     +------------+|
|   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 中的滚动事件）

更新 3

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

---

其他解决方案

---

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

• 1. 这无济于事，因为标头没有放在容器上方，而是放在上方。 HTML & JavaScript - Passing the scroll action from one element to another
• 2. 接受的答案不会传输事件，而只是设置 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;
  });
});

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

Answer 2

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

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

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

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

希望对你有帮助。

更新 1

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

Answer 3

如果您尝试在 iframe 中捕获鼠标滚轮事件并将其发送给父级，这就是我让它工作的方式。

在 iframe 中加载的页面中，我放置了一个 id="everything" 的 DIV，它包含了页面的整个 BODY

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

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

然后在父级中，我必须在顶部附近插入此 SCRIPT

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

}

这会将 Wheelscroll 捕获在 iframe 中，并将事件推送到父级。