如何捕获页面上的所有滚动事件，而不向每个容器附加on涡旋处理程序
请考虑以下网页：
<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。如果移动滚动条，则会触发div元素上的onscroll事件。但是，主体上的onscroll事件不会被触发。这是预期的，因为W3C声明元素onscroll事件不会“冒泡”。
但是，我正在开发一个客户端web框架，它需要知道页面上任何元素上的滚动条何时被滚动。如果onscroll冒泡了，这将很容易做到，但不幸的是，它没有。有没有其他方法可以检测整个页面中的onscroll事件？(现在我主要关注Webkit，所以特定于Webkit的解决方案很好.)
以下是我尝试过的一些事情：
- 捕获
DOMAttrModified(似乎不触发移动滚动条)。 - 使用DOM观察者(也似乎不触发滚动条)
- 将
onscroll事件类型更改为冒泡(似乎不可能)
全局捕获onscroll事件的唯一方法似乎是将一个onscroll事件附加到每个可能滚动的元素上，这是非常丑陋的，而且会损害我的框架的性能。
有谁知道更好的方法吗？
回答 6
Stack Overflow用户
发布于 2015-10-05 17:37:28
在现代浏览器中检测所有滚动事件的最简单方法是在附加事件时使用“捕获”而不是“冒泡”：
window.addEventListener('scroll', function(){ code goes here }, true)不幸的是，正如我所知，在老浏览器(如<= IE8 )中没有类似的内容。
Stack Overflow用户
发布于 2015-03-03 14:56:36
我也有过同样的问题。
当然，最简单的方法是使用jQuery。请注意，此方法可能会降低页面significantly.的速度。此外，它将不考虑在事件绑定后添加的任何新元素。。
$("*").scroll(function(e) {
// Handle scroll event
});在vanilla JavaScript中，您可以在useCapture调用中将useCapture布尔值设置为true，它将触发所有元素，包括那些动态添加的元素。
document.addEventListener('scroll', function(e) {
// Handle scroll event
}, true);不过请注意，这将在滚动事件实际发生之前触发。据我所知，有两个阶段的事件。捕获阶段首先发生，并从页面根(ownerDocument?)开始。然后遍历到事件发生的元素。在此之后是冒泡阶段，它从元素返回到根。
一些快速测试也表明，这可能是jQuery处理它的方式(至少用于跟踪所有页面元素上的滚动)，但我不能100%确定。
这里有一个JSFiddle，显示香草JavaScript方法http://jsfiddle.net/0qpq8pcf/
Stack Overflow用户
发布于 2012-11-02 15:04:40
*...crickets啁啾..。*
好吧，我猜这个问题不会得到任何堆叠溢出的爱，所以我最好回答我自己的问题，也可以回答我到目前为止找到的最好的解决方案，以防另一个用户偶然发现这个问题：
我想出的最佳解决方案是为BODY元素捕获"onmousedown“和"onkeydown”：这些事件是气泡，因此如果用户试图移动页面上的滚动条，这些全局函数将作为副产品触发。然后，在这些函数中，只需查找event.target并向这些对象附加一个临时的“on涡旋”事件，直到鼠标/键再次“向上”为止。使用该方法，您可以避免“处理程序膨胀”，并且仍然可以全局捕获所有“on涡旋”事件。(我认为这也适用于“鼠标轮”滚动，但我对最终皱纹的研究仍未完成。)
https://stackoverflow.com/questions/13184779
复制相似问题
腾讯云开发者
