scrollイベントはいつ発火する？


次のコードを実行してみて、スクロールバーを動かす速さによってコールバックが呼ばれる回数が異なることを知りました。（速ければ少なく、遅ければ多い）

[code]

    window.onscroll = () => {
        console.log("scrolled");
    };
    
[/code]

スクロールイベントはどのような条件が揃うと発火するのでしょうか？

[scroll - Event reference | MDN](https://developer.mozilla.org/en-
US/docs/Web/Events/scroll)などにも条件については書かれていないようです。




おおざっぱに言うと、暇なときにイベントが発火します。1つの要素に対して複数のイベントが溜まることはありません。

規格にのっとって説明すると([12.2. Scrolling](https://drafts.csswg.org/cssom-
view/#scrolling-events))、ブラウザがスクロール処理を行うとスクロールした要素が pending scroll event
targets に溜められます。すでに要素が pending scroll event targets
に入っている場合は何もしません。このため、どんなにたくさんスクロールしても、後述の処理が始まるまでは最大1つの `scroll`イベントしか予約されません。

[イベントループに入ったときに、run the scroll steps
が起動](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-
processing-model:run-the-scroll-steps)され、pending scroll event targets に対して
`scroll` イベントを発火します。  
ただし、scroll イベントハンドラはページを重くする要因となっていることが多いので、実際のブラウザではイベントループで毎回 run the scroll
steps を起動していないかもしれません。




おおざっぱに言うと、暇なときにイベントが発火します。1つの要素に対して複数のイベントが溜まることはありません。

規格にのっとって説明すると([12.2. Scrolling](https://drafts.csswg.org/cssom-
view/#scrolling-events))、ブラウザがスクロール処理を行うとスクロールした要素が pending scroll event
targets に溜められます。すでに要素が pending scroll event targets
に入っている場合は何もしません。このため、どんなにたくさんスクロールしても、後述の処理が始まるまでは最大1つの `scroll`イベントしか予約されません。

[イベントループに入ったときに、run the scroll steps
が起動](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-
processing-model:run-the-scroll-steps)され、pending scroll event targets に対して
`scroll` イベントを発火します。  
ただし、scroll イベントハンドラはページを重くする要因となっていることが多いので、実際のブラウザではイベントループで毎回 run the scroll
steps を起動していないかもしれません。

