CSSスクロールアンカリングモジュール レベル1

1. はじめに

現在、ウェブの利用者は、ビューポート外で発生する変更によって コンテンツが移動し、注意がそがれることがよくあります。 例としては、スクリプトが広告を含むiframeを挿入したり、 サイズ指定されていない画像が遅いネットワークで読み込まれる場合などです。

従来、ブラウザーのデフォルトの挙動は このような変更が発生した際に絶対的なスクロール位置を維持することでした。 つまり、コンテンツのずれを防ぐには、 ウェブページが後で読み込まれるもののために ページ上にスペースを確保する必要があります。 実際には、このような対応を一貫して行っているサイトは少数です。

スクロールアンカリングは、意外なコンテンツのずれを最小限に抑えることを目的としています。 ビューポート外の変更に対してスクロール位置を調整することで これを実現します。

説明文書では スクロールアンカリングの概要を非公式に説明しています。

1.1. 値の定義

この仕様は、CSSプロパティ定義の規約（[CSS2]）に従い、 値の定義構文（[CSS-VALUES-3]）を使用しています。 この仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

各プロパティ固有の値に加え、 この仕様で定義されるすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、これらは明示的に繰り返していません。

2. 説明

スクロールアンカリングは、レイアウト変更にまたがってユーザーの文書表示を安定させることを目指します。 DOMノード（アンカーノード）を選択し、 その移動をもとにスクロール位置の調整を行います。

ただし、スクロールコンテナーが現在スナップされている場合 （[CSS-SCROLL-SNAP-1]参照）、 スクロールアンカリングは再スナップで許容される調整に限定されます。

2.1. アンカーノードの選択

各スクロールボックスは DOM内で深い位置にあり、重要なDOMノードとして優先されるべきか、 または最適表示領域のブロック開始端に近い アンカーノードを選択しようとします。

注: ユーザーエージェントがscroll-paddingプロパティに対応していない場合、 スクロールボックスの最適表示領域はその内容領域と同じです。

アンカーノードは、非アトミックインライン以外の どのボックスでもかまいません。 アンカーノードは常にスクロールボックスの子孫です。 場合によっては、スクロールボックスがアンカーノードを選択しないこともあります。

要素CがスクロールボックスSのスクロールアンカーとなる 有効な候補となるには、以下のすべての条件を満たす必要があります:

• Cは非アトミックインラインな要素である。

• CはS内で部分的に表示または完全に表示されている。

• CはSの子孫である。

• Cは除外サブツリー内にない。

• Cの祖先のうちSまでのいずれも除外サブツリー内にない。

一部の要素は、アンカー選択のための優先候補とみなされます:

1. 文書のフォーカス領域のDOMアンカー。

2. find-in-pageユーザーエージェントアルゴリズムの 現在アクティブな選択一致を含む要素。 一致が複数の要素にまたがる場合は、最初の要素のみを考慮します。

なお、優先候補が非アトミックインライン要素の場合は、 その最も近い非アトミックインラインな祖先要素を優先候補として扱います。

概念的には、スクロールボックスのスクロール位置が変更されるたびに 新しいアンカーノードが計算されます。 （パフォーマンス最適化のため、 実装ではアンカーノードが必要になるまで計算を遅らせる場合があります。）

2.2. スクロール調整

アンカーノードが選択された場合、 アンカーノードが移動すると、 ブラウザーはアンカーノードのスクロールアンカリング境界矩形のブロック開始端の 前回のオフセットy0と現在のオフセットy1を、 スクロール対象のコンテンツのブロックフロー方向のブロック開始端に対して計算します。

そして、スクロール位置に対し、ブロックフロー方向にy1 - y0の調整を 抑制ウィンドウの終了時に実行するようキューに入れます。

スクロール調整は、[CSSOM-VIEW]で定義される[[cssom-view-1#scrolling-events#scrolling]]の一種であり、 そこで記載されている方法でscrollイベントを生成します。

2.2.1. 抑制ウィンドウ

アンカーノードの各移動は 抑制ウィンドウと呼ばれる 一定時間内で発生します。抑制ウィンドウは次のように定義されます:

• 抑制ウィンドウは、現在のHTML処理モデルの イベントループの開始時、または直前の抑制ウィンドウ終了時のうち新しい方で開始します。

• 抑制ウィンドウは、現在のHTML処理モデル イベントループの終了時、またはスクロール位置の変化により結果や副作用が異なる次の操作の直前 （例：getBoundingClientRect()の呼び出し）、 どちらか早い方で終了します。

注: 抑制ウィンドウの境界は、スクロールアンカリングAPIが安定したら HTML標準に組み込まれるべきです。

同じ抑制ウィンドウ内で複数回アンカーノードの移動が発生する場合があります。

抑制ウィンドウの終了時、 ユーザーエージェントはウィンドウ中にキューされた全てのスクロール調整を、 ウィンドウ中に抑制トリガーによって抑制されなかったものについて実行します。

2.2.2. 抑制トリガー

抑制トリガーは、 アンカーノードの移動に対するスクロールアンカリング調整を その移動の抑制ウィンドウ内で発生した場合に抑制する操作です。 抑制トリガーは以下の通りです:

• アンカーノードからスクロール要素（または文書）までの経路上のいずれかの要素（両端含む）で、 以下のプロパティの算出値を変更すること:

  • top、left、right、bottom

  • marginおよびそのロングハンド

  • paddingおよびそのロングハンド

  • width、height、min-width、max-width、min-height、max-height

  • position

  • transform

• スクロール要素（または文書）内の任意の要素で positionプロパティの算出値を変更し、 その要素が絶対位置指定になったり、絶対位置指定でなくなったりすること。 このトリガーは、変更された要素がアンカーノードからスクロール要素までの経路上か否かに関わらず適用されます。

• スクロール要素のスクロールオフセットがゼロになること。

注: 抑制トリガーは、スクロールイベントハンドラでコンテンツが移動する既存Webコンテンツとの互換性のために存在します。

3. 除外API

スクロールアンカリングは、導入時にデフォルトの動作となることを目指しており、 ユーザーがレガシーコンテンツでも恩恵を受けられるようにしています。overflow-anchorは、 ページの一部または全体でスクロールアンカリングを無効化したり（オプトアウト）、 DOMの一部をアンカーノード選択アルゴリズムから除外することができます。

値の定義は以下の通りです:

auto

要素が自身または祖先によって作成されたスクロールボックスの アンカーノード選択アルゴリズムに 参加する資格があることを宣言します。

none

要素およびその子孫（他のスクロール要素内に入れ子になっていないもの）は、 自身または祖先によって作成されたスクロールボックスの アンカーノード選択アルゴリズムに 参加しないことを宣言します。

注: overflow-anchor: none要素の子孫に対して スクロールアンカリングを「再度有効化」することはできません。 ただし、子孫のスクロールコンテナーは（自身のスクロールボックスに対して） 明示的にoverflow-anchor: noneが設定されていなければ 自動的に「再度有効化」されます。

注: overflow-anchorプロパティは （異なる値で）CSS Sticky Scrollbars向けにも提案されましたが、 現在は廃止されています。

4. プライバシーとセキュリティの考慮事項

本仕様はスクロール位置の計算方法のみ調整するものであり、 新たなプライバシーやセキュリティ上の考慮事項を導入しません。

変更点

2020年2月11日作業草案以降の変更点

• 有効な候補および優先候補の定義を追加。

• スクロールアンカリングとスクロールスナップの相互作用を明確化。