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に依存します。