1. はじめに
このセクションは規定的ではありません。
コンテンツ作成者は、すべてのスクロールチェーニングがすべてのスクロールコンテナで発生することを必ずしも望むわけではありません。いくつかのスクロールコンテナは包含ブロックチェーンの一部かもしれませんが、文書内で異なる論理的目的を持ち、スクロールがスクロールチェーンに沿って継続するのを防ぎたい場合があります。これを実現するために、コンテンツ作成者はpassiveフラグを設定せずにイベントリスナーを設置し、スクロールチェーニングが発生する恐れがある場合はpreventDefaultを使用します。これは以下の理由で望ましくありません:
-
ユーザーエージェントが将来的に、コンテンツ作成者のイベントリスナーでは対応できない新しいスクロール入力方法を導入する可能性があります。
-
非passiveなイベントリスナーはスクロールを遅延させます。なぜなら、ユーザーエージェントがpreventDefaultが呼ばれたかどうか判断するまで待つ必要があり、スクロールの遅延を招きます。
-
スクロールがスクロール境界付近で行われる場合、デフォルトアクションによって、スクロールコンテナの端までのスクロールと境界デフォルトアクションの両方が発生する可能性があります。preventDefaultを呼び出すと、境界デフォルトアクションだけでなく、スクロールポートの端へのスクロールもキャンセルしてしまいます。
-
イベントのデフォルトアクションが、作成者がキャンセルしたくない追加動作(例:オーバースクロールアフォーダンス)を提供する場合もあります。preventDefaultでは、スクロールチェーニングなど特定のデフォルトアクションのみをキャンセルすることはできません。
したがって、コンテンツ作成者がスクロールチェーニングやオーバースクロールを堅牢かつ高性能、将来互換性のある方法で制御することは不可能です。overscroll-behaviorプロパティはこの問題を解決します。
2. 動機付け例
#sidebar { overscroll-behavior : contain; }
この場合、作成者はサイドバーにcontainを使用して、スクロールが親の文書要素にチェーンされるのを防ぐことができます。
html { /* プル・トゥ・リフレッシュのみ無効化し、スワイプナビゲーションは許可 */ overscroll-behavior-y : contain; }
この場合、作成者はビューポート定義要素にcontainを使用して、オーバースクロールによるナビゲーションアクションの発動を防ぐことができます。
#infinite_scroller { overscroll-behavior-y : none; }
この場合、作成者は無限スクローラーにnoneを使用して、スクロールチェーニングとオーバースクロールアフォーダンスの両方を防ぐことができます。
3. スクロールチェーニングと境界デフォルトアクション
オペレーティングシステムには、スクロールチェーニングやオーバースクロールアフォーダンスなどのスクロールに関するルールがあります。本仕様はスクロールチェーニングやオーバースクロールアフォーダンスの実装有無や方法を規定しません。本仕様は、実装されている場合に限り、コンテンツ作成者がそれらを無効化できるようにします。
スクロールチェーニングとは、スクロールが一つのスクロールコンテナから祖先のスクロールコンテナへ、スクロールチェーンに沿って伝播されることです。通常、スクロールチェーニングはイベントターゲットから、包含ブロックチェーンを再帰的に辿って開始されます。このチェーン内のスクロールコンテナがスクロールイベントやジェスチャを受け取った場合、それに応答したり、チェーン上に伝播したりします。チェーニングは通常、スクロールポートが境界に到達したときに発生します。
スクロールチェーンとは、 あるスクロール コンテナーから別のスクロールコンテナーへスクロールが伝播する順序である。ビューポートは、 文書の scrollingElement として、スクロールチェーン内での配置と、 それに適用される連鎖規則への準拠の両方に関して、 スクロール連鎖に関与する。
スクロール境界は、スクロールコンテナのスクロール位置がスクロールポートの端に到達したことを示します。スクロールコンテナがその方向にオーバーフローしない場合、要素は常にスクロール境界にあるとみなされます。
境界デフォルトアクションは、ユーザーエージェント定義のデフォルトアクションであり、スクロールがスクロールポートの端に対して行われたときに実行されます。ローカル境界デフォルトアクションは、ページとやりとりせず、境界デフォルトアクションがスクロールコンテナ上で実行される例(オーバースクロールUIアフォーダンスの表示など)です。対照的に、非ローカル境界デフォルトアクションは、ページとやりとりするものであり、スクロールチェーニングやナビゲーションアクションなどが該当します。
4. オーバースクロール挙動プロパティ
オーバースクロールの 挙動は、スクロール コンテナー要素のスクロールポートが そのスクロールボックスの境界に達したときに許可される境界既定動作を制御する。
overscroll-behavior プロパティは、オーバースクロールの 挙動をスクロール コンテナー要素に対して指定する。このプロパティにより、コンテンツ作者は、スクロールコンテナー要素がスクロール連鎖や オーバースクロールアフォーダンスを防止しなければならないことを指定できる。
スクロール コンテナーではない要素は、このプロパティの値を受け入れなければならないが、無視しなければならない。 このプロパティは、ユーザーエージェントが対応するすべてのスクロール方法に適用されなければならない。
注記: このプロパティは、スクロール連鎖と オーバースクロールの両方を防止するうえで、少なくとも preventDefault と同程度に強い保証を提供するべきである。 そうでなければ、コンテンツ作者は代わりに preventDefault を使用することになる。
| 名前: | overscroll-behavior |
|---|---|
| 値: | [ contain | none | auto ]{1,2} |
| 初期値: | auto auto |
| 適用対象: | スクロールコンテナ要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 個々のプロパティ参照 |
| 正規順序: | 文法順 |
| アニメーション型: | : 離散 |
| メディア: | visual |
overscroll-behaviorプロパティは、overscroll-behavior-xとoverscroll-behavior-yの指定値をこの順で設定するショートハンドプロパティです。一つだけ値が指定された場合、二つ目の値は同じ値になります。
値の意味は以下の通りです:
- contain
- この値は、要素が非ローカル境界デフォルトアクション(スクロールチェーニングやナビゲーションなど)を実行してはならないことを示します。ユーザーエージェントは、この要素またはその子孫からスクロールが発生した場合でも、スクロールチェーン上のいかなる祖先にもスクロールチェーニングをしてはなりません。ただし、この値はローカル境界デフォルトアクション(オーバースクロールアフォーダンスの表示など)の挙動は変更しません。
- none
- この値は、containと同じ動作を意味し、加えてこの要素はローカル境界デフォルトアクション(オーバースクロールアフォーダンスの表示など)も実行してはなりません。
- auto
- この値は、ユーザーエージェントがスクロール 連鎖、オーバースクロール、およびナビゲーションジェスチャーに関して、通常の境界既定動作を 実行するべきであることを示す。
注: ユーザーエージェントがスクロールチェーニングやオーバースクロールアフォーダンスを実装しない場合、これらの値は準拠実装に対して副作用を持ちません。
注: プログラムによるスクロールはクランプされ、境界デフォルトアクションを発動できません。
4.1. overscroll-behaviorの物理方向ロングハンド
| 名前: | overscroll-behavior-x, overscroll-behavior-y |
|---|---|
| 値: | contain | none | auto |
| 初期値: | auto |
| 適用対象: | スクロールコンテナ要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| 算出値: | 指定通り |
| 正規順序: | 文法順 |
| アニメーション型: | : 離散 |
| メディア: | visual |
overscroll-behavior-xプロパティは水平方向のオーバースクロール挙動を指定し、overscroll-behavior-yプロパティは垂直方向のオーバースクロール挙動を指定します。水平・垂直両軸で同時にスクロールが行われる場合、各軸のオーバースクロール挙動は独立して考慮されます。
4.2. overscroll-behaviorのフロー相対ロングハンド
| 名前: | overscroll-behavior-inline, overscroll-behavior-block |
|---|---|
| 値: | contain | none | auto |
| 初期値: | auto |
| 適用対象: | スクロールコンテナ要素 |
| 継承: | no |
| パーセンテージ: | N/A |
| 算出値: | 指定通り |
| 正規順序: | 文法順 |
| アニメーション型: | : 離散 |
| メディア: | visual |
これらのプロパティはoverscroll-behavior-xおよびoverscroll-behavior-yプロパティに対応します。 マッピングは要素のwriting-modeに依存します。