概要

overscroll-behavior-xは、CSSで横方向のスクロールがコンテンツの端に到達したときにブラウザがどう振る舞うかを制御するプロパティです。通常、スクロール可能なコンテンツの端に達すると、ブラウザはページ全体をスクロールさせたり、モバイルデバイスでは「オーバースクロール」効果（ゴムバンドのような反動効果）が発生します。このoverscroll-behavior-xプロパティを使うと、こうした挙動を抑制し、ユーザー体験をカスタマイズすることができます。 この記事では、overscroll-behavior-xの使い方と、横スクロールコンテンツにおける活用方法を紹介します。

overscroll-behavior-xの基本的な使い方

overscroll-behavior-xプロパティは、横方向にスクロール可能なコンテンツが端に達したとき、親要素やページ全体が影響を受けるかどうかを制御します。デフォルトでは、スクロールが端に達すると、ページ全体のスクロールやオーバースクロールの効果が発生しますが、このプロパティで制限を加えることができます。

基本構文

.element {
    overscroll-behavior-x: contain;
}

このコードでは、overscroll-behavior-xをcontainに設定し、横方向のスクロールが端に達しても親要素内でスクロールを制限し、ページ全体に影響を与えないようにしています。

overscroll-behavior-xの主な値

auto（デフォルト）

autoはデフォルトの設定で、ブラウザの通常のスクロール挙動を許可します。スクロールがコンテンツの端に到達すると、オーバースクロール効果が発生したり、親要素やページ全体がスクロールされる可能性があります。

.element {
    overscroll-behavior-x: auto;
}

contain

containは、要素のスクロールが端に到達しても、スクロールの動作がその要素内に限定され、親要素やページ全体のスクロールには影響しません。この設定は、特にサイドスクロールメニューやカルーセルなどで有効です。

.element {
    overscroll-behavior-x: contain;
}

none

noneは、スクロールが端に達したとき、オーバースクロール効果を完全に無効化し、スクロールの伝播を完全にブロックします。これにより、ユーザーが端に達したときでも、スクロールの動作は終了し、それ以上ページ全体には影響しません。

.element {
    overscroll-behavior-x: none;
}

実際の使用例

次に、overscroll-behavior-xを使用した具体的な例を見てみましょう。

例 1: 横スクロールメニュー

横にスクロール可能なメニューを作成し、スクロールが端に達した際の挙動をoverscroll-behavior-xで制御します。

HTML

<div class="scroll-menu">
    <div class="menu-item">Item 1</div>
    <div class="menu-item">Item 2</div>
    <div class="menu-item">Item 3</div>
    <div class="menu-item">Item 4</div>
</div>

CSS

.scroll-menu {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    white-space: nowrap;
}
.menu-item {
    padding: 10px;
    min-width: 100px;
    background-color: lightblue;
    margin-right: 10px;
}

解説

  • .scroll-menuは横スクロール可能なメニューで、overscroll-behavior-x: contain;を指定することで、スクロールが端に達してもページ全体のスクロールに影響しないようにしています。
  • この設定により、メニューの端に到達しても他のスクロール可能な要素に干渉することなく、快適に横スクロールが可能です。

例 2: オーバースクロール効果を完全に無効化

次の例では、横スクロール要素でオーバースクロールを完全に無効化します。これにより、モバイルデバイスでもゴムバンド効果が発生しません。

HTML

<div class="scroll-container">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
</div>

CSS

.scroll-container {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: none;
}
.content {
    min-width: 200px;
    margin-right: 20px;
    background-color: lightgray;
    padding: 20px;
}

解説

  • overscroll-behavior-x: none;を使用することで、スクロールが端に達した際の反動効果やページ全体のスクロールを無効にします。
  • 特に、モバイルデバイスでのスクロール体験をスムーズにし、予期しない動作を防ぎます。

overscroll-behavior-xを使う理由

スクロール制御の強化

overscroll-behavior-xを使用することで、特に横スクロールコンテンツに対するユーザーのスクロール体験を管理できます。ページ全体のスクロールを防ぎ、特定の要素内でスクロールを完結させることで、ユーザーが混乱することなくコンテンツを操作できるようになります。

モバイルでのオーバースクロール防止

モバイルデバイスでは、スクロールが端に達するとゴムバンドのような反動効果が発生することがあります。overscroll-behavior-x: noneを使用することで、このオーバースクロール効果を無効化し、より滑らかで自然なスクロール体験を提供できます。

UXの向上

横スクロール可能なコンテンツがあるページでは、スクロールの伝播を制限することで、不要なページ全体のスクロールや意図しない動作を防ぐことができ、ユーザーエクスペリエンス（UX）が向上します。

まとめ

overscroll-behavior-xは、横方向のスクロール動作を制御し、特定の要素内にスクロールを閉じ込めたり、オーバースクロール効果を無効化するための非常に便利なプロパティです。カルーセルや横スクロールメニューなど、横方向のスクロールを持つコンテンツでの予期しない動作を防ぐために使用されます。スクロールを制御して、より滑らかなWeb体験を提供するために、このプロパティを活用してみてください。

参照:

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