我想知道是否可能以及如何从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 的研究,这似乎还不可能。我暂时不回答这个问题,以防有人找到方法:)
其他解决方案
这些问题讨论了这个问题,但没有按照我期望的方式为这个设置提供解决方案:
- 这无济于事,因为页眉不是放在容器上方,而是放在容器上方。 HTML & JavaScript - Passing the scroll action from one element to another
- 接受的答案不会传输事件,而只是设置 scrollTop。这不是浏览器在滚动时提供的行为。您可以清楚地看到 jsFidle 在悬停元素时或正常执行滚动时发生滚动的方式的差异。浏览器使滚动平滑,scrollTop 只是设置值使其“震惊”。然而,除了“震惊”部分,这非常接近我想要的行为! Pass mousewheel event through fixed content
最佳答案
我最终也需要这个功能。
如果您正在监听“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;
});
});
不过,我还没有在移动设备上测试过它,我怀疑它不会在那里工作。
关于javascript - 将鼠标滚轮/滚动事件从一个 div 转移到另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38079612/