概要

CSSのoverscroll-behaviorプロパティは、ユーザーがスクロール操作を行いコンテンツの端に達した際に、ブラウザがどのような挙動を示すかを制御するためのプロパティです。このプロパティを使用することで、スクロールが親要素に伝わってしまうのを防いだり、スクロールのバウンス効果を無効にするなど、スクロールのユーザー体験を向上させることができます。

overscroll-behaviorの基本的な使い方

overscroll-behaviorは、スクロールがコンテンツの端に達したときの挙動を定義します。通常、コンテンツの端に到達するとスクロールの動きが親要素に伝播したり、ブラウザ特有のバウンス（弾性スクロール）効果が発生する場合があります。overscroll-behaviorを使用すると、これらの挙動をコントロールできます。

.container {
    overscroll-behavior: contain; /* スクロールの伝播を防ぐ */
}

この例では、.container内のスクロールが親要素に伝わらないように設定されています。

overscroll-behaviorの値

overscroll-behaviorには主に以下の値があります。それぞれの値がどのようにスクロールの挙動に影響するかを解説します。

auto

デフォルトの動作です。スクロールはそのまま伝播し、ブラウザの標準的なスクロールエフェクト（バウンスなど）が発生します。

.container {
    overscroll-behavior: auto;
}

contain

スクロールの伝播を防ぎ、親要素にはスクロールが伝わりませんが、ブラウザのバウンス効果はそのまま発生します。

.container {
    overscroll-behavior: contain;
}

none

スクロールの伝播もブラウザのバウンス効果も無効にします。スクロールが完全にその要素内で完結します。

.container {
    overscroll-behavior: none;
}

使用例

スクロールの伝播を防ぐ

overscroll-behavior: contain;を使って、スクロールが親要素に伝わらないように設定します。

<div class="outer-container">
    <div class="inner-container">
        <p>スクロールしてください。このコンテナのスクロールが外部に伝わりません。</p>
        <p>コンテンツが長くなると、スクロール位置の伝播が発生しないように制御します。</p>
        <p>さらにスクロール...</p>
    </div>
</div>
<style>
.outer-container {
    height: 200px;
    overflow: auto;
    border: 2px solid #333;
}
.inner-container {
    height: 300px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 2px solid #666;
}
</style>

この例では、.inner-containerのスクロールが.outer-containerに伝わらないため、ユーザーは内部コンテンツのスクロールのみを操作できます。

バウンス効果の無効化

overscroll-behavior: none;を使用すると、ブラウザのスクロールバウンス効果を無効にできます。

<div class="no-bounce">
    <p>スクロールの端に到達しても、バウンス効果が無効化されています。</p>
</div>
<style>
.no-bounce {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    overscroll-behavior: none;
    padding: 10px;
}
</style>

この例では、.no-bounceコンテナ内でスクロールしても、端に達した際のバウンスエフェクトが発生しません。

注意点

  • overscroll-behaviorは、スクロールの制御によりページ全体のユーザー体験に直接影響を与えるため、適切な値を選択することが重要です。
  • バウンス効果を無効にすると、ユーザーはスクロールが止まったように感じることがあります。この設定は、アプリケーションやウェブサイトのデザインコンセプトに沿って慎重に使用しましょう。
  • モバイルブラウザや一部の古いブラウザでは、overscroll-behaviorがサポートされていない場合があるため、必要に応じて他のCSSプロパティやJavaScriptでフォールバックを実装することを検討してください。

まとめ

overscroll-behaviorプロパティは、スクロールがコンテンツの端に達したときの挙動を柔軟に制御するための強力なCSSツールです。これを使うことで、スクロール位置が不必要に親要素に伝わらないようにしたり、ブラウザ特有のエフェクトを無効にして安定した操作感を提供できます。特にスクロールが多いレイアウトやインタラクティブなコンテンツを扱う場合に有効ですので、是非活用してみてください。

参照:

`CSS` overscroll-behavior | MDN