在页面上监听所有滚动事件

6 浏览
0 Comments

在页面上监听所有滚动事件

背景:

我正在编写一个组件,点击时会打开一个子菜单。我无法确定这个组件将放置在页面的哪个位置,也无法确定它将嵌套在可能设置了overflow属性的区域中的深度。

考虑到溢出可能会剪裁子菜单,我选择将子菜单本身附加到body上,给它设置绝对定位,并通过代码将其与原始组件关联起来。这样可以解决溢出问题。

问题:

然而,如果用户滚动页面,子菜单将保持原位,而不是随其关联的组件移动,因此,我需要能够监听页面上发生的任何滚动事件,以便能够适当地重新定位子菜单。

如果有一种简单的方法来监听所有滚动事件,或者有另一种更好的方法来实现这个组件,我会非常感谢任何建议。

我在JSFiddle上进行了一些尝试,并设置了一个沙盒,但是我没有成功,也没有在这个网站或其他任何地方找到答案;虽然可能是我使用了错误的搜索词,但我无法想象我是第一个提出这个问题的人。

编辑:

为了解决关闭投票的问题,我不是在提供代码的情况下寻求帮助调试问题,也不是在提出不会对任何人有帮助的问题。我的问题是如何监听发生在任何地方的特定类型的所有事件,我认为这是全局适用的,尽管这可能是主观的。

编辑:

$(window).on('scroll', function(){ /**/ });不是一个选项,因为它只监听窗口滚动,而不是任何嵌套滚动。

$('#ex1 #ex2').on('scroll', function(){ /**/ });不是一个选项,因为它要求实现代码的人知道页面上当前或可能的未来可能滚动的区域。

0