概要

overscroll-behavior-blockプロパティは、CSSで要素のブロック方向（縦方向）のオーバースクロールの挙動を制御するためのプロパティです。このプロパティを使用することで、スクロールコンテナが末端に到達した際のスクロール効果（オーバースクロール）の挙動を制御でき、親要素やビューポートへの影響を調整するのに役立ちます。

構文

overscroll-behavior-block: auto | contain | none;

パラメータ

  • auto
    デフォルトの設定で、オーバースクロールが発生した際にブラウザの標準的な動作（スクロールバウンスやスクロールの連鎖）が適用されます。
  • contain
    オーバースクロールを抑制し、スクロールの連鎖を防ぎますが、末端でのバウンス効果は維持されます。親要素やビューポートへのスクロールの伝播を防ぎたい場合に使用します。
  • none
    完全にオーバースクロールを抑制し、スクロールの連鎖やバウンス効果をすべて防ぎます。スクロールの末端に到達した際にスクロールイベントが外部に伝播しないようにします。

戻り値

overscroll-behavior-blockは指定された値に従って、縦方向のオーバースクロール挙動を制御します。これにより、スクロールの伝播やバウンスの挙動が調整され、ユーザー体験が改善されます。

説明

overscroll-behavior-blockは、スクロールコンテナが縦方向にスクロールした際、コンテナの末端に達した場合のスクロール効果を調整するためのプロパティです。特にモバイルデバイスやタッチ対応デバイスでは、スクロールのバウンスや親要素へのスクロールの伝播がユーザーにとって予期しない挙動を引き起こす場合があります。このプロパティを活用することで、より直感的なスクロール挙動を実現できます。

主な特徴

  • スクロールのバウンス効果や、親要素・ビューポートへのスクロール伝播を個別に制御できます。
  • モバイルデバイスでのスクロール体験を改善し、不要なスクロール連鎖を防止します。
  • overscroll-behavior-inlineと組み合わせることで、インライン方向のオーバースクロールも個別に調整可能です。

使用例

基本的な使用例

以下の例では、overscroll-behavior-blockをcontainに設定し、親要素へのスクロール伝播を防いでいます。

.container {
  width: 300px;
  height: 200px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-block: contain; /* 親要素へのスクロール伝播を防ぐ */
  background-color: lightblue;
}
.content {
  height: 400px;
  background-color: coral;
}

この設定により、子要素のスクロールが末端に達しても、スクロールの連鎖が親要素に伝播しません。

完全にオーバースクロールを抑制する例

noneを使用して、スクロールの連鎖とバウンス効果を完全に防ぎます。

.container {
  width: 300px;
  height: 200px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-block: none; /* オーバースクロールを完全に抑制 */
  background-color: lightgreen;
}
.content {
  height: 500px;
  background-color: salmon;
}

この設定では、スクロールが末端に達しても、バウンスや親への伝播が一切発生しません。

デフォルトの動作を維持する例

autoを指定して、デフォルトのスクロール挙動作を維持します。

.container {
  width: 300px;
  height: 200px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-block: auto; /* デフォルトのオーバースクロール動作 */
  background-color: lightyellow;
}
.content {
  height: 600px;
  background-color: lightcoral;
}

この設定では、末端でのスクロールバウンスやスクロールの伝播が通常通り発生します。特定のオーバースクロール挙動を制御せず、ブラウザの標準的な動作に任せたい場合に適しています。

注意事項

  • overscroll-behavior-blockは縦方向のスクロール挙動を調整するため、横方向のスクロールについては overscroll-behavior-inline を使用して制御できます。
  • モバイルデバイスのサポート
    iOSやAndroidブラウザでの動作にも対応しており、モバイルでの使用も推奨されます。ただし、互換性は必ず確認しておくとよいでしょう。
  • ユーザー体験への影響
    このプロパティを使用すると、特定のデフォルト動作が制御されるため、ユーザー体験に与える影響を考慮し、慎重に使用することが重要です。

overscroll-behavior-blockは、コンテンツ内のスクロールの連鎖を防ぎたい場合や、意図しないスクロール効果を回避したい場合に非常に便利です。これを活用することで、よりコントロールされたスクロール体験を提供できるため、特にモバイルアプリやタッチ対応のデザインにおいて重宝されます。

参照:

overscroll-behavior-block - CSS | MDN