Document: scroll event

文档视图或者一个元素在滚动时,会触发元素的scroll事件。

Bubbles Yes
Cancelable No
Interface Event
Event handler property onscroll

注意:在 iOS UIWebViews中, 滚动进行时不会触发 scroll 事件;只有当滚动结束后事件才会被触发。参见 Bootstrap issue #16202。Safari 和 WKWebViews 则没有这个问题。

示例

Scroll 事件节流

由于 scroll 事件可被高频触发,事件处理程序不应该执行高性能消耗的操作,如DOM操作。而更推荐的做法是使用 requestAnimationFrame(), setTimeout()CustomEvent 给事件节流,如下所述。

然而需要注意的是,输入事件和动画帧常常以差不多的频率被触发,因此以下优化常常不必要。这个例子使用 requestAnimationFrame 优化 scroll 事件。

// 参见: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // 根据滚动位置做的事
}

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;
  }
});

在 resize 事件页面中查看更多类似的例子。

规范

规范 状态
Document Object Model (DOM) Level 3 Events Specification Obsolete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scroll eventChrome Full support 1Edge Full support 12Firefox Full support 6IE Full support 9Opera Full support 11.6Safari Full support 2WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 12Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

参见