要約

  • W3Cが2020年2月11日に公開した最初の草案は、表示領域の近くに基準となる要素を選び、その位置が変わった分だけスクロール位置を補正する仕組みを記した。
  • 同年11月11日の草案は、基準にできる候補とスクロールスナップとの関係を明確にした。overflow-anchor: noneを使えば、特定の領域を候補から外せる。

読者は一文を追っていた。そこへ広告が遅れて到着し、記事の上に割り込む。ページは伸び、目の前にあった段落が下へ逃げる。スクロールバーの数字だけは変わらない。従来のブラウザーは、文書の先頭から何ピクセル進んだかを保存していたからだ。数字には誠実でも、読書には不親切だった。見ている場所の上でページが伸びたなら、同じ数字はもう同じ場所を指さない。

2020年2月11日のW3C最初の公開草案は、広告のiframeがスクリプトで挿入される場合と、寸法を確保していなかった画像が遅い回線で後から現れる場合を挙げた。どちらも画面の外、しかも読者が見ている箇所より上で高さを増やす。最初から場所を空けておけば穏やかに済む。草案は、準備が行き届かなかったページでもブラウザーが読者の位置を守れるようにした。

鍵になるのは「アンカーノード」だ。ブラウザーはスクロールする箱の内側から、表示領域の上端に近く、文書の構造では比較的深い要素を基準として選ぶ。その要素が以前どこにあり、配置の変更後どこへ移ったかを測る。差の分だけスクロール位置を調整すると、増えた広告の高さを吸収できる。広告は居場所を得るが、段落の席までは奪えない。

選び方を雑にすると、今度は補正のほうがページを揺らす。変化する飾り、ナビゲーション、本文が一緒に並ぶページで、すべての要素を同じ扱いにはできない。草案は候補の条件を定め、抑制ウィンドウの終わりに補正を行う手順を示した。レイアウトの細かな動きをまとめて扱うための時間の区切りである。

11月11日の作業草案は、有効な候補と優先候補の定義を補い、スクロールスナップとの関係を整理した。決まった位置で止まるよう設計された画面では、その停止位置も計算に入る。W3Cの公開履歴は2020年の二つの版を並べ、2月の発表は読書中に画面外の変化でページが動く厄介さを端的に語っている。

ページを作る側にも判断の余地がある。overflow-anchorの初期値はauto。noneを指定すると、スクロール領域でのアンカリングを止めたり、その要素の下を基準候補から外したりできる。独自にスクロールを動かす部品や、動くことに意味がある演出は、そこで範囲を指定する。一般的な読書を守る仕組みと、そのページ固有の振る舞いが同じ画面で折り合う。

本を読む指で行を押さえたまま、前の章に紙を一枚挟まれる場面を想像してほしい。ページ数は変わる。指は同じ文に残る。ブラウザーが2020年に手に入れたのは、その小さな指の仕事だった。