Scroll boundary (スクロール境界)
スクロール境界 (scroll boundary) とは、スクロール可能な要素が特定の方向、先頭または末尾のどちらか(水平スクロールの場合は左端または右端)にそれ以上スクロールできなくなる点のことです。これは通常、スクロールポートの端です。
スクロールコンテナーのコンテンツが、スクロール方向のコンテナーサイズを超えない場合、コンテナーは常にスクロール境界にあるとみなされます。これは、スクロールする余分なコンテンツがないためです。 overflow: hidden
が設定されている場合など、コンテンツがスクロールしないようになっている場合、その要素はスクロールコンテナーではないので、スクロール境界はありません。
ユーザーがコンテンツをスクロールしてスクロールポートの境界に達すると、跳ね返り効果などの視覚的な効果や、モバイル端末でのプルトゥリフレッシュなどの機能的な操作が発生する場合があります。この既定のブラウザー動作は、既定の境界アクションと呼ばれます。
例えば、モバイル端末の場合、既にページが一番上にある状態で下方向にドラッグすると跳ね返り効果が発生し、ページの更新が発生することがあります。この跳ね返りや更新は既定のアクションです。
既定では、ローカルまたは非ローカルのアクションを行うことができます。
- 既定のローカル境界アクションは、その要素に限定された特定のスクロール可能な領域の境界で発生するアクションです。このアクションは、祖先コンテナーやウェブページの残りの部分に影響を与えないため、ローカルとみなされます。
- 既定の非ローカル境界アクションとは、スクロールコンテナーのスクロール境界に達すると、スクロールされる固有の要素を超えた効果がある場合です。この例はスクロール連鎖で、ある要素のスクロール境界に達すると、親要素や祖先要素のスクロールが発生し、場合によってはナビゲーションのようなページ全体のアクションが開始されます。
関連情報
overscroll-behavior
CSS プロパティ- CSS オーバーフローモジュール
- CSS オーバースクロール動作モジュール
- CSS スクロールスナップモジュール