考虑以下网页:
<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
则会触发 div 元素上的事件。但是,onscroll
不会触发 body 上的事件。这是意料之中的,因为 W3C 声明元素onscroll
事件不会“冒泡”。
但是,我正在开发一个客户端 Web 框架,该框架需要知道任何时候滚动页面的任何元素上的滚动条。如果冒泡,这很容易做到onscroll
,但不幸的是它没有。有没有其他方法可以检测onscroll
整个页面的事件?(现在我主要关注 Webkit,所以一个特定于 Webkit 的解决方案会很好......)
以下是我尝试过的一些事情:
- 捕获
DOMAttrModified
(似乎不会因为移动滚动条而触发。) - 使用 DOM 观察者(滚动条似乎也不会触发)
- 将事件类型更改
onscroll
为冒泡(似乎不可能)
似乎onscroll
全局捕获事件的唯一方法是将onscroll
事件附加到每个可能滚动的元素上,这非常难看并且会损害我的框架的性能。
有人知道更好的方法吗?