scroll

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

基本资料

标准
DOM L3, CSSOM View
接口定义
UIEvent
冒泡
element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡
能否取消
否
Target
defaultView, Document, Element
Default Action
无

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not.
cancelable 只读 Boolean Whether the event is cancellable or not.
view 只读 WindowProxy document.defaultView (window of the document)
detail 只读 long (float) 0.

示例

 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影响。