EventTarget事件：scroll

EventTarget事件 - scroll

滾動(dòng)文檔視圖或元素時(shí)會(huì)觸發(fā)scroll事件。

基本信息

屬性

示例

滾動(dòng)事件限制

由于scroll事件可以以高速率觸發(fā)，因此事件處理程序不應(yīng)執(zhí)行計(jì)算量大的操作，例如DOM修改。相反，建議使用requestAnimationFrame()，setTimeout()或CustomEvent來(lái)限制事件，如下所示。

但請(qǐng)注意，輸入事件和動(dòng)畫幀以大約相同的速率觸發(fā)，因此下面的優(yōu)化通常是不必要的。此示例優(yōu)化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;
  }
});

規(guī)范

• DOM L3
• CSSOM視圖

瀏覽器兼容性

iOS UIWebView 

在iOS UIWebViews中，滾動(dòng)時(shí)不會(huì)觸發(fā)scroll事件；它們只在滾動(dòng)完成后才會(huì)被觸發(fā)。請(qǐng)參閱Bootstrap問(wèn)題#16202。Safari和WKWebViews不受此錯(cuò)誤的影響。