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

Question

我想知道是否可能以及如何将鼠标滚轮/滚动事件(用户的滚动尝试)从header转移到container.

我有以下示例情况:

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

---

情况

---

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

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

更新1

情况的一个方面1

情况2的一个小问题

更新2

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

更新3

这与我预期的解决方案最接近,该解决方案基于"其他解决方案2".感谢Maksym Stepanenko的研究,它似乎还不可能.我暂时没有回答这个问题以防有人确实找到方法:)

---

其他方案

---

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

• 1. 这没有用,因为标题不是放在容器上面而是放在容器上面.HTML和JavaScript - 将滚动操作从一个元素传递到另一个元素
• 2. 接受的答案不会传输事件,只是设置scrollTop.这不是浏览器在滚动时提供的行为.您可以清楚地看到jsFidle在悬停元素时滚动发生的方式或正常执行滚动时的差异.浏览器使滚动平滑,scrollTop只设置值使其"震惊".然而,除了'震撼'部分,这非常接近我想要的行为!通过固定内容传递鼠标滚轮事件

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. 您实际上无法调用浏览器对事件的默认反应（例如滚动），因为它发生在事件分派之前。这里解释了类似的事情。

2. -实际上dispatchEvent是触发用 javascript 实现的处理程序的事件。例如小提琴

3. 执行此操作的唯一跨浏览器方法是scrollTop使用或不使用不同的缓动（例如 jquery animate）。因为对于 FF 和其他浏览器来说，调度滚动事件的工作方式也不同。

希望能帮助到你。

更新1

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