scroll

在document视图或者一个element在滚动的时候，会触发元素的scroll事件。

基本资料

标准

DOM L3, CSSOM View

接口定义

UIEvent

冒泡

element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡

能否取消

否

Target

defaultView, Document, Element

Default Action

无

属性

示例

 scroll 事件可能会被高频度的触发, 因此事件的handler不应执行重型操作，例如DOM操作就不应该放在事件处理中。常见的推荐方案是使用 requestAnimationFrame, setTimeout 或 customEvent，示例代码如下。但是请注意，输入事件和动画帧以大约相同的速率触发，因此下面的优化通常是没有必要的。（译者注：可以使用 setTimeout 代替）

使用 window.requestAnimationFrame 优化 Scroll 处理性能

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var 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;
});

resize 事件的处理同理。

浏览器兼容

iOS UIWebView

在 iOS UIWebViews中, 在视图的滚动过程中，scroll 事件不会被触发；在滚动结束后，scroll 才会触发. 参见 Bootstrap issue #16202. Safari 和 WKWebViews不受此bug影响。