聆听页面上的所有滚动事件 [英] Listening to all scroll events on a page

问题描述

背景：

我正在编写一个组件，可以在点击时打开子菜单。我不知道这个组件将放在页面上的位置，或者它将嵌套在可能具有 overflow 属性集的区域中的距离。

I'm writing a component that opens up a sub-menu on click. I can't know where this component will be placed on the page or how far it will be nested in areas that may have the overflow property set.

鉴于溢出可能会剪切子菜单，而是让子菜单本身附加到正文给它一个绝对的定位并通过代码将其链接到原始组件。这可以解决溢出问题。

Given that the overflow may clip the sub-menu I am instead making the sub-menu itself be attached to the body giving it an absolute position and linking it via code to the original component. This takes care of the overflow issue.

问题：

但是如果是用户滚动子菜单保持原位，而不是移动其链接的组件，所以我需要能够听到页面上发生的任何和所有滚动事件所以我可以重新定位子-menu恰当。

However if a user scrolls the sub-menu remains in place, rather than moving with its linked component, so I need to be able to listen to any and all scroll events that occur on the page so I can reposition the sub-menu appropriately.

如果有一种简单的方法来收听所有滚动事件，或者如果有另一种更好的方法来做这个组件我会很感激任何输入。

If there's an easy way to listen to all scroll events or if there's another better way to do this component I would appreciate any input.

我玩过JSFiddle并设置了沙箱但是我没有取得任何成功，也没有在本网站或其他任何地方找到答案;虽然也许我使用的是错误的搜索词，但我无法想象我是第一个有这个问题的人。

I've played around with JSFiddle and set up a sandbox but I haven't had any success nor have I found an answer on this site or anywhere else for that matter; though perhaps I was using the wrong search terms, I can't imagine that I'm the first to have this question.

EDIT

EDIT

为了解决投票问题，我不是在没有提供代码的情况下请求帮助来调试问题，也不是在问一些无效的问题未来的任何人。我问我怎么会去听某种类型的所有事件而不管可能发生在哪里，我发现这种情况在全球范围内适用，但也许这是主观的。

To address the close vote, I'm not asking help to debug an issue without providing code nor am I asking something that won't help anyone in the future. I'm asking how I would go about listening to all event of a certain type not matter where the may occur, which I find globally applicable, though perhaps that's subjective.

编辑

EDIT

$（窗口）.on（'scroll'，function（） {/ ** /}）;
不是一个选项，因为它只侦听窗口滚动，而不是任何嵌套滚动。

$(window).on('scroll', function(){ /**/ }); is not an option as it only listens to the window scroll, not any nested scrolls.

$（'＃ex1＃ex2'）。on（'scroll'，function（）{/ ** /}）; 不是一个选项，因为它需要正在实施代码以了解页面上可能滚动的任何当前或可能的未来区域的人。

$('#ex1 #ex2').on('scroll', function(){ /**/ }); is not an option as it requires the person who is implementing the code to be aware of any current or possible future areas on the page that may scroll.

推荐答案

你应该能够使用第三个参数 true 附加文档级侦听器，以捕获所有元素上的滚动事件。这是这样的：

You should be able to attach a document-level listener with a third parameter of true to capture the scroll events on all elements. Here's what that looks like:

document.addEventListener('scroll', function(e){ }, true);

最后 true 是重要的部分，它告诉浏览器在发送时捕获事件，即使该事件通常不起泡，如更改，聚焦和滚动。

The true at the end is the important part, it tells the browser to capture the event on dispatch, even if that event does not normally bubble, like change, focus, and scroll.

这是一个例子：< a href =http://jsbin.com/sayejefobe/1/edit?html,js,console,output> http://jsbin.com/sayejefobe/1/edit?html,js,console,output

这篇关于聆听页面上的所有滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！