EventTarget事件：scroll

EventTarget事件 - scroll

滚动文档视图或元素时会触发scroll事件。

基本信息

属性

示例

滚动事件限制

由于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不受此错误的影响。