如何捕获网页上的所有滚动事件没有onscroll处理程序安装到每一个容器(How to captur

考虑以下网页：

 <html>
   <body onscroll="alert('body scroll event')">
     <div style='width:200px;height:200px;overflow:auto' onscroll="alert('div scroll event')">
       <div style='height:400px'>
       </div>
     </div>
   </body>
 </html>

这个HTML创建一个具有滚动条核实。如果移动滚动条，被触发的div元素的“onscroll”事件。然而，身体上的“onscroll”事件不被解雇。这是意料之中的，因为在W3C指出元素onscroll事件没有“泡沫”。

但是，我正在开发一个客户端Web框架，需要知道页面的任何元素上的滚动条滚动的任何时间。这将是很容易做的，如果“onscroll”冒泡，但遗憾的是它没有。是否有任何其他方式在整个页面检测onscroll事件？（现在我主要关注的Webkit，所以具体的Webkit内核的解决方案就可以了...）

这里有一些事情我已经试过：1.捕捉DOMAttrModified（似乎不火的移动滚动条。）2.使用DOM观察员（也似乎不火的滚动条）3.改变“onscroll”事件类型泡（似乎是不可能的）

似乎只有这样才能捕捉onscroll事件是全球的一个onscroll事件附加到可滚动的每一个元素，这是非常丑陋，会伤害我的框架的性能。

任何人都知道一个更好的办法？

提前致谢！

Answer 1:

检测现代浏览所有滚动事件将使用“捕获”，而不是“冒泡”连接的事件时，最简单的方法：

window.addEventListener('scroll', function(){ code goes here }, true)

不幸的是，因为我知道有在旧的浏览器没有相应的如<= IE8

Answer 2:

* ...蟋蟀的鸣叫...... *

OK，我想这个问题是不会得到任何计算器的爱，所以我不如回答我的问题，以最佳的解决方案，我发现至今，万一碰到这个问题，其他用户绊倒：

最好的解决办法，我想出了是捕捉body元素“onmousedown事件”和“onkeydown事件”：如果用户试图将这些网页的全局函数都将作为一个副产品上移动滚动条这些事件泡沫，等等产品。然后，在这些功能，只需仰望event.target并附加一个临时的“onscroll”事件对这些对象，直到鼠标/关键是“涨”了。使用该方法，可以避开“处理器膨胀”，仍然在全球捕获所有“onscroll”事件。（我认为这会为“鼠标滚轮”滚动为好，但我对最后的皱纹研究仍在审理工作。）

Answer 3:

我有同样的问题。

当然，最简单的方法是使用jQuery。 请注意，这种方法可能你的网页显著放缓。 此外，它不会占事件绑定之后添加任何新的元素。

$("*").scroll(function(e) {
    // Handle scroll event
});

在香草JavaScript中，可以设置useCapture布尔到true在你addEventListener调用，它会在所有的元素，包括动态添加。

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

不过要注意的是，滚动事件前实际发生的，这将触发。据我了解，有两个阶段的事件经过。捕获阶段首先发生，并从页面根（ownerDocument？）开始，遍历到该事件发生的元素。在此之后而来的冒泡阶段，从元件横穿备份到根。

一些快速的测试也表明，这可能是jQuery的如何处理它（对至少所有页面元素跟踪滚动），但我不是100％肯定。

这里有一个的jsfiddle显示香草JavaScript方法http://jsfiddle.net/0qpq8pcf/

Answer 4:

当你想，即在后台什么滚屏之后关闭对话框下正常工作：

var scrollListener = function(e) {
    // TODO: hide dialog
    document.removeEventListener('scroll', scrollListener, true);
};

document.addEventListener('scroll', scrollListener, true);

文章来源: How to capture all scrolling events on a page without attaching an onscroll handler to every single container