スクロールの内部処理（コンポジタスクロールとアンカリング）

スクロールは「描画」ではなく「合成オフセットの更新」

スクロールバーを動かしたとき、ブラウザはページ全体を描き直しているわけではありません。ページの内容は既にレイヤーのテクスチャとして保持されており、スクロールとは本質的にそのテクスチャをどの位置で切り出して表示するかという合成オフセット（scroll offset）を更新する操作です。レイヤーとテクスチャの土台は ブラウザのレイヤー化とGPUコンポジット を前提にします。

この更新はコンポジタスレッドで駆動できます。メインスレッド（JS実行・スタイル計算・レイアウトが走る場所）とは独立しているため、JSが長タスクで詰まっていても、指やホイールの動きにスクロールが追従し続けます。これを**コンポジタスクロール（compositor-driven scrolling）**と呼びます。

なぜ passive イベントが必要なのか

ここで wheel / touchstart / touchmove イベントのリスナが問題になります。これらのリスナは内部で event.preventDefault() を呼んでスクロールそのものをキャンセルできます（例 ピンチズームの抑止やカスタムスクロール）。

決定的なのは、ブラウザがそのリスナが preventDefault を呼ぶかどうかを、リスナを実行し終えるまで知り得ないことです。コンポジタスレッドが指の動きを受け取っても、preventDefault される可能性がある限り、勝手にスクロールしてしまうと「キャンセルされたのに動いた」という矛盾が起きます。そこでブラウザは安全側に倒し、スクロールを保留してメインスレッドにリスナを実行させ、その結果（preventDefaultされたか）を待ってからスクロールを進めます。メインスレッドが長タスクで詰まっていれば、その分スクロールが遅れて固まります。

passive: true は、この問題をリスナ側の事前宣言で解く仕組みです。passive 指定したリスナは「自分は preventDefault を呼ばない」とブラウザに確約します。確約があれば、ブラウザは結果を待つ必要がなくなり、コンポジタスレッドで即座にスクロールを進めつつ、リスナは並行して実行できます。リスナ登録のオプション解釈は イベントターゲットとリスナ登録の内部モデル に詳述しています。

// 悪い：非passive。ブラウザは preventDefault の有無を確認するまでスクロールを保留する
el.addEventListener('touchmove', onMove);

// 良い：passive 宣言で「キャンセルしない」と確約。コンポジタが即スクロールできる
el.addEventListener('touchmove', onMove, { passive: true });

スクロールアンカリングがレイアウトシフトを補正する仕組み

スクロール中（あるいはスクロール位置を保ったまま閲覧中）に、ビューポートより上で要素が挿入されたり、画像が遅れて読み込まれて高さが確定したりすると、その下にあった内容がまるごと下方向へ押し出されます。何も補正しなければ、いま読んでいた箇所が画面外へ飛び、ユーザーは行を見失います。これは Core Web Vitalsの計測アルゴリズム で扱うCLS（Cumulative Layout Shift）の典型的な発生源でもあります。

**スクロールアンカリング（scroll anchoring）**は、これをブラウザが自動補正する機能です。原理は次の通りです。

1. アンカー選定:
   レイアウト後、ビューポート内に見えている要素から「基準要素（anchor node）」を1つ選ぶ。
   通常はビューポート上端付近にある、深い階層の安定した要素。

2. シフト検出:
   次のレイアウトで、アンカーの画面上のY座標が以前と変わったかを比較する。
   上方への挿入や画像確定で、アンカーが本来 dy だけ下にずれていたとする。

3. オフセット補正:
   スクロール位置を dy だけ加算して、アンカーを元の画面位置へ戻す。
   結果として、挿入は「画面外の上側で起きた」ことになり、見ている箇所は1pxも動かない。

つまりアンカリングは、シフトを起こさせないのではなく、シフトと同量だけスクロール位置をずらして相殺します。挿入が画面外（上側）で起きている限り、ユーザーには何も起きていないように見えます。

overflow-anchor プロパティでこの挙動を制御できます。既定は auto（有効）で、none を指定するとそのサブツリーをアンカー選定から除外します。

/* 無限スクロールで上方追記する実装などで、ブラウザの自動補正と自前制御が衝突する場合に無効化 */
.scroll-container { overflow-anchor: none; }

レイアウトシフトを根本から減らす

アンカリングは強力ですが、対象は「アンカーより上の変化」に限られます。読んでいる箇所そのもののシフトを防ぐには、要素の最終サイズを事前に確保するのが王道です。

これらでビューポート内のシフトを抑えたうえで、ビューポート外（上方）の挿入はスクロールアンカリングに任せる、という役割分担が現実的です。プロパティごとのレイアウトコストは リフローとリペイントのコスト を合わせて押さえると、どの変更がシフトを生むかを事前に見積もれます。

まとめ