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

发布时间：2020-12-14 22:37:12 所属栏目：资源来源：网络整理

导读：我想知道是否可能以及如何将鼠标滚轮/滚动事件(用户的滚动尝试)从标题传输到容器. 我有以下示例情况： +------------+ +------------+|| header | | header ||+------------+ +------------+|| || | ||| || | ||| container || | 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：无法在’EventTarget’上执行’dispatchEvent’：事件已被调度.
(现在它只是chrome中的滚动事件)

更新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”信息.然后,您只需将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;
  });
});

我没有在手机上测试过这个,我怀疑它不会在那里工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!