DOM

：

：

Element：scroll イベント

　編集：2022.09.25 by T.A.

[Edge]。→

要素がスクロールしたときに発行されます。

バブリング なし
キャンセル 不可
インターフェイス Event
イベント ハンドラー プロパティ onscroll

Note： iOS の UIWebViews では、scroll イベントはスクロールしている最中には発行されません。スクロールが完了した後に発行されます。 を参照してください。Safari と WKWebViews はこのバグの影響を受けません。

例
スクロールイベントの間引き

mdn より

scroll イベントは高い頻度で発行されるため、イベント ハンドラーで DOM の変更のような計算が重い操作を実行するべきではありません。代わりに、次のように requestAnimationFrame()、setTimeout()、CustomEvent などを使用してイベントを間引くことをお勧めします。

なお、ただし、input イベントやアニメーション フレームがおよそ同じ頻度で発行されるため、以下の最適化は必要ないことがあります。この例は 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;
  }
});

HTML： 

<DIV id=IdTest style="width:100px; height:100px; overflow:scroll; border:1px solid red;">
  aaaaaaaaaaaaaaaaaaaaa<BR>
  あ<BR>
  い<BR>
  う<BR>
  え<BR>
  お<BR>
  か<BR>
  き<BR>
  く<BR>
  け<BR>
  こ<BR>
  さ<BR>
</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //エラーが起こった時のイベント処理：eve に Event オブジェクトが入る。
  D=eve;              //＝[object]：[object Event]
	//isTrusted＝[boolean]：true
	//type＝[string]：scroll
	//target＝[object]：[object HTMLDivElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//…
  let E=eve.target; //イベントが起きた要素を取得。
  IdLog.innerHTML=E.scrollLeft +","+ E.scrollTop; //記録表示：スクロールしている量
}
IdTest.onscroll=Job;  //エラーが起こった時の処理を割り当てる。
テスト