EventTarget事件：scroll
EventTarget事件 - scroll
滚动文档视图或元素时会触发scroll事件。
基本信息
| 接口 | UIEvent |
|---|---|
| 是否冒泡 | 不在元素上，而是在文档上触发时向默认视图冒泡 |
| 是否可取消 | 没有 |
| 目标 | DefaultView Document,,Element |
| 默认操作 | 没有 |
属性
| 属性 | 类型 | 描述 |
|---|---|---|
target（只读） | EventTarget | 事件目标（DOM树中最顶层的目标）。 |
type（只读） | DOMString | 事件的类型。 |
bubbles（只读） | Boolean | 事件是否正常冒泡。 |
cancelable（只读） | Boolean | 事件是否可以取消。 |
view（只读） | WindowProxy | Document.defaultView（window文件） |
detail（只读） | long（float） | 0。 |
示例
滚动事件限制
由于scroll事件可以以高速率触发，因此事件处理程序不应执行计算量大的操作，例如DOM修改。相反，建议使用requestAnimationFrame()，setTimeout()或CustomEvent来限制事件，如下所示。
但请注意，输入事件和动画帧以大约相同的速率触发，因此下面的优化通常是不必要的。此示例优化requestAnimationFrame的scroll事件。
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// Do something with the scroll position
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});规范
- DOM L3
- CSSOM视图
浏览器兼容性
iOS UIWebView
在iOS UIWebViews中，滚动时不会触发scroll事件；它们只在滚动完成后才会被触发。请参阅Bootstrap问题#16202。Safari和WKWebViews不受此错误的影响。