overscroll-behavior-yとは？

CSSのoverscroll-behavior-yプロパティは、縦方向のスクロール時にオーバースクロールが発生した際、どのような挙動をするかを制御するためのプロパティです。通常、要素のスクロールが終点に達すると、そのスクロールイベントが親要素やブラウザ全体に伝播し、ページ全体がスクロールしたり、モバイル端末でバウンス効果が発生することがあります。overscroll-behavior-yを使うことで、このスクロールの伝播やバウンスを防ぎ、よりコントロールされたスクロール挙動を実現できます。 このプロパティは、特にモーダルウィンドウや埋め込みコンテンツ内でのスクロール操作を管理する場合に役立ちます。ユーザーのスクロール操作が意図しない挙動を引き起こさないようにすることで、快適なユーザー体験を提供できます。

overscroll-behavior-yの構文

.element {
  overscroll-behavior-y: auto | contain | none;
}

各値の説明

  • auto: デフォルトの値です。スクロールが終端に達したとき、スクロールイベントは親要素やブラウザに伝播します。
  • contain: オーバースクロール時にスクロールイベントの伝播を防ぎますが、要素自体のスクロールは可能です。
  • none: スクロールの伝播を完全に防ぎ、オーバースクロール効果も無効化します。要素内でスクロールが終了しても、親要素やブラウザに影響を与えません。

基本的な使用例

例: モーダルウィンドウ内でのスクロール制御

モーダルウィンドウ内でコンテンツが縦に長い場合、スクロールが必要になりますが、モーダル外のページ全体がスクロールされるのを防ぎたい場合があります。このとき、overscroll-behavior-yを使用して、スクロール伝播を防ぐことができます。

<div class="modal">
  <div class="modal-content">
    <p>縦に長いコンテンツ...</p>
    <p>さらにコンテンツ...</p>
    <p>最後までスクロールしてください。</p>
  </div>
</div>

.modal {
  width: 300px;
  height: 400px;
  overflow-y: scroll;
  overscroll-behavior-y: contain; /* 親要素へのスクロール伝播を防ぐ */
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
.modal-content {
  height: 800px;
}

解説

  1. overflow-y: scroll: .modal内で縦スクロールを有効にします。
  2. overscroll-behavior-y: contain: モーダル内のスクロールが終わっても、親要素やページ全体にはスクロールイベントが伝播しません。これにより、ページ全体がスクロールされることなく、モーダル内のコンテンツのみがスクロールされます。

モバイルでのバウンス効果を防ぐ

モバイル端末では、スクロールが終端に達した際に、オーバースクロールによるバウンス（反発）効果が発生します。この効果を防ぐには、overscroll-behavior-y: noneを使用します。

例: モバイルでのスクロールバウンスを防ぐ

<div class="scroll-area">
  <p>スクロールできるエリア...</p>
  <p>さらにスクロール...</p>
  <p>終端に達しました。</p>
</div>

.scroll-area {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overscroll-behavior-y: none; /* バウンス効果を無効化 */
  background-color: #e0e0e0;
}

解説

  • overscroll-behavior-y: none: モバイル端末でのスクロール時、終端に達したときに発生するバウンス効果を無効にします。これにより、スクロールが自然に止まるため、滑らかなユーザー体験が提供されます。

実際の使用ケース

overscroll-behavior-yは、さまざまなシチュエーションで役立ちます。特に以下のようなケースで効果を発揮します。

埋め込みコンテンツでのスクロール制御

例えば、iframeで埋め込んだコンテンツが縦方向にスクロール可能な場合、親ページにスクロールが伝播しないようにする必要があります。このような場合に、overscroll-behavior-y: containやnoneを使うと便利です。

.iframe-container {
  overscroll-behavior-y: contain; /* 埋め込みコンテンツ内でスクロールを完結させる */
}

サイドバーやナビゲーション内のスクロール

長いサイドバーや固定されたナビゲーション内でスクロールが発生する場合、スクロールがメインコンテンツに伝播することを防ぎ、サイドバー内でスクロールを完結させるために使用します。

.sidebar {
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

フルスクリーンモーダルのスクロール制御

フルスクリーンのモーダルやダイアログ内でのスクロール操作中に、背後のページがスクロールしないようにするために使用されます。モーダルにoverscroll-behavior-y: noneを指定することで、スクロールがモーダル内に限定されます。

.fullscreen-modal {
  overscroll-behavior-y: none;
}

ブラウザ対応

overscroll-behavior-yはモダンブラウザのほとんどでサポートされていますが、特にモバイル端末やWebKit系ブラウザ（例: Safari）でバウンス効果を抑える用途で使われることが多いです。ブラウザ対応状況は以下の通りです。

  • Chrome: サポート
  • Firefox: サポート
  • Safari: サポート
  • Edge: サポート
  • IE: 未サポート ブラウザ間での挙動を確認しながら使用することをお勧めします。

まとめ

CSSのoverscroll-behavior-yプロパティを使うことで、縦方向のスクロール時にオーバースクロールやスクロール伝播を制御できます。これにより、モーダルウィンドウや埋め込みコンテンツ、サイドバーなど、複数のスクロール領域を持つページで快適なユーザー体験を提供することが可能です。特に、モバイル端末でのバウンス効果を防ぐ際には、このプロパティが非常に役立ちます。Webデザインにおいて、より洗練されたスクロール体験を実現するために、overscroll-behavior-yをぜひ活用してみてください

参照:

overscroll-behavior - `CSS` Cascading Style Sheets | MDN