CSS オーバースクロール動作
CSS オーバースクロール動作モジュールは、スクロールコンテナーのスクロール位置がスクロール境界に達したときの挙動を制御するプロパティを提供します。この側面を制御することは、埋め込まれたスクロール可能な領域が親コンテナーのスクロールを発生させないようにするシナリオで具体的な有益なことです。
ブログにコメントするとき、指定された <textarea>
の長さを超えてコメントすると、テキストエリアの終わりを越えてスクロールするとブログ全体がスクロールすることに気づくかもしれません。これは、スクロール境界として知られるスクロール可能な領域の終わりに達すると、他にもコンテンツやページ全体がスクロールする可能性があるためです。このようなスクロールの動作はスクロール連鎖と呼ばれます。
要素のコンテンツがそのコンテナーよりも大きく、 overflow
でスクロールを許可しているか既定でスクロールするものであり(<textarea>
のように)、要素のスクロール可能領域を越えてスクロールを続けると、親要素または基盤となるページでスクロールが開始されます。
逆に、ウェブサイトの利用規約を最後までスクロールし、チェックボックスを有効にするためにコンテンツの最後に到達しても、ページが強制的にスクロールされたり、(携帯電話のように)跳ね返ったりしない場合があります。この例は、オーバースクロールの動作を制御し、スクロールの連鎖を防ぐことができることを示しています。
このモジュールはオーバースクロールの動作を定義します。ユーザーがスクロール可能な要素の境界を超えてスクロールしたときの操作を指定します。
リファレンス
CSS プロパティ
用語集の用語
ガイド
- CSS の構成要素: コンテンツのオーバーフロー
-
オーバーフローとは何か、どのように制御するのかを学びます。
関連概念
-
scrollbar
ARIA ロール -
包含ブロックの概念
-
CSS オーバーフローモジュール:
overflow
一括指定プロパティoverflow-clip-margin
プロパティscroll-behavior
プロパティtext-overflow
プロパティ
-
スクロールコンテナーとスクロールポート(用語集の用語)
-
CSS スクロールスナップモジュール:
scroll-padding
一括指定プロパティscroll-snap-type
プロパティscroll-margin
一括指定プロパティscroll-snap-stop
プロパティscroll-snap-align
プロパティ
-
CSSOM view モジュール:
Element.getBoundingClientRect()
メソッドElement.scroll()
メソッドElement.scrollBy()
メソッドElement.scrollIntoView()
メソッドElement.scrollTo()
メソッドscroll
(Document のイベント)
仕様書
Specification |
---|
CSS Overscroll Behavior Module Level 1 |
関連情報
- CSS ボックスモデルモジュール
- CSS 論理的プロパティと値モジュール
- CSS スクロールスナップモジュール
- Take control of your scroll - customizing pull-to-refresh and overflow effects (developer.chrome.com, 2017)