オーバーフロー

コンテンツが親の範囲を超える場合、そのコンテンツを処理する方法はいくつかあります。スクロールしてスペースを追加したり、はみ出した部分を切り取ったり、省略記号で切り詰め部分を示すなど、さまざまなことができます。スマートフォン アプリや複数の画面サイズを対象に開発する場合は、特にオーバーフローの考慮が重要です。

CSS には 2 つの異なるクリッピング オプションがあります。text-overflow は個々のテキスト行に使用し、overflow プロパティはボックスモデルのオーバーフローを制御するために使用します。

text-overflow を使用した 1 行のオーバーフロー

テキストノードを含む要素(段落 <p> など)には text-overflow プロパティを使用します。要素の使用可能なスペースにテキストが収まらない場合に、テキストをどのように表示するかを指定します。ページ上で表示可能な HTML テキストはすべて、テキストノードに格納されています。text-overflow を使用するには、折り返しのない 1 行のテキストが必要です。そのため、overflowhidden に設定し、折り返しを防止する white-space 値も設定する必要があります。

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

overflow プロパティの使用

要素に設定されたオーバーフロー プロパティは、子要素が使用可能なスペースよりも多くのスペースを必要とする場合に何が起こるかを制御します。これは、Google マップなどのインタラクティブ マップのように、ユーザーが特定のサイズにクリップされた大きな画像をパンするような場合に意図的に行うことができます。チャット アプリで、ユーザーが長いメッセージを入力してテキスト バブルに収まらない場合など、意図的でないこともあります。

オーバーフローは 2 つの部分に分けることができます。親要素には、変更されない厳密に制約されたスペースがあります。これはウィンドウと考えることができます。子要素は、親からより多くのスペースを必要とするコンテンツです。これは、窓から見えるものと考えることができます。オーバーフローを管理すると、ウィンドウでこのコンテンツをどのようにフレーム設定するかを指定できます。

縦軸と横軸のスクロール

overflow-y プロパティは、デバイス ビューポートの垂直軸に沿った物理的なオーバーフローを制御します。つまり、上下にスクロールします。

overflow-x プロパティは、デバイスのビューポートの水平軸に沿ったオーバーフローを制御し、左右にスクロールします。

スクロール方向の論理プロパティ

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

overflow-inline プロパティと overflow-block プロパティは、ドキュメントの向きと書き込みモードに基づいてオーバーフローを設定します。

overflow の省略形

overflow ショートカットを使用すると、overflow-x スタイルと overflow-y スタイルの両方を 1 行で設定できます。

overflow: hidden scroll;

2 つのキーワードが指定されている場合、最初のキーワードは overflow-x に適用され、2 番目のキーワードは overflow-y に適用されます。それ以外の場合は、overflow-xoverflow-y の両方で同じ値が使用されます。

overflow プロパティで使用できる値とキーワードについて詳しく見てみましょう。

overflow: visible(デフォルト)
プロパティを設定しないと、overflow: visible がウェブのデフォルト値になります。これにより、コンテンツが意図せず非表示になることがなくなり、「コンテンツを非表示にしない」または「正確なレイアウトの安全なレイアウト」という基本原則に沿ったレイアウトが実現します。
overflow: hidden
overflow: hidden を使用すると、コンテンツは指定された方向にクリップされ、表示するためのスクロールバーは提供されません。
overflow: scroll
overflow: scroll を使用すると、スクロールバーを有効にして、ユーザーがコンテンツをスクロールできるようにできます。コンテンツが現在はオーバーフローしていなくても、スクロールバーが表示されます。これは、サイズ変更などに基づいてコンテナがスクロール可能になる可能性がある場合に、将来のレイアウト シフトを減らし、スクロール可能な領域をユーザーに視覚的に準備するのに最適な方法です。
overflow: clip
overflow: hidden と同様に、overflow: clip のコンテンツは要素のパディング ボックスにクリップされます。cliphidden の違いは、clip キーワードではプログラマティック スクロールを含むすべてのスクロールも禁止されることです。
overflow: auto
最後に、最もよく使用される値 overflow: auto です。これにより、ユーザーの設定に従って、必要に応じてスクロールバーが表示されますが、デフォルトでは非表示になり、スクロールはユーザーとブラウザに委ねられます。

スクロールとオーバーフロー

これらの overflow の動作の多くはスクロールバーを導入しますが、オーバーフロー コンテナでのスクロールを制御できる特定のスクロール動作とプロパティがいくつかあります。

スクロールとユーザー補助

スクロール可能な領域がフォーカスを受け取れるようにすることが重要です。これにより、キーボード ユーザーは Tab キーでボックスに移動し、矢印キーを使用してスクロールできます。

スクロール ボックスにフォーカスを設定できるようにするには、tabindex="0"aria-labelledby 属性を持つ名前、適切な role 属性を追加します。次に例を示します。

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

次に、CSS を使用してボックスにフォーカスが当たっていることを示すことができます。outline プロパティを使用して、スクロール可能であることを視覚的に示します。

CSS を使用してユーザー補助を適用するで、Adrian Roselli は CSS を使用してユーザー補助の回帰を防ぐ方法を示しています。たとえば、スクロールのみを有効にして、正しい属性が使用されている場合にのみフォーカス インジケーターを追加します。次のルールでは、ボックスに tabindexaria-labelledbyrole の属性が含まれている場合にのみ、ボックスをスクロール可能にします。

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

ボックスモデル内のスクロールバーの位置

スクロールバーはパディング ボックス内のスペースを占有し、overlaid ではなく inline の場合、スペースを競合する可能性があります。ボックスモデル モジュールでは、レイアウト シフトの潜在的な原因について詳しく説明しています。

root-scroller と implicit-scroller

特にモバイル アプリやハイブリッド アプリを開発している場合、一部のスクロールにはプルして更新する動作やその他の特別な動作があることに気づくことがあります。このスクロール動作は、ルート スクロールで発生します。ページに存在するルート スクロールバーは 1 つだけです。デフォルトでは、documentElement がページのルート スクロールですが、ルート スクロールとなる要素を変更することで、documentElement 以外のスクロールに特別な動作を適用できます。この新しいスクロールを暗黙的なルート スクロールと呼びます。

ルート スクロールを作成するには、スクロールの昇格と呼ばれる手法を使用します。コンテナを固定として配置し、ビューポート全体を覆うようにし、スクロールの z インデックスを一番上にします。ルート スクロールとネストされた暗黙的スクロールの違いについては、こちらをご覧ください。

この動画では、バウンス動作と新しいスタイル設定機能(
)を備えたルート スクロールと、拡張されたスクロール動作のない暗黙的なスクロールを比較しています。

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

scroll-behavior を使用すると、要素へのブラウザ制御のスクロールを選択できます。これにより、.scrollTo() やリンクなどのページ内ナビゲーションの処理方法を指定できます。

これは、prefers-reduced-motion と組み合わせて、ユーザー設定に基づいてスクロール動作を指定する場合に特に便利です。

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

モーダル オーバーレイの最後までスクロールして、スクロールを続け、オーバーレイの背後にあるページが移動したことがある場合は、スクロール チェーン、つまり親のスクロール コンテナへのバブルアップが発生しています。overscroll-behavior プロパティを使用すると、オーバーフロー スクロールが親コンテナに漏洩するのを防ぐことができます(スクロール チェーンと呼ばれます)。

理解度を確認する

オバーフローの知識をテストする

テキスト オーバーフロー要素オーバーフローは同じですか?

false
true

overflow プロパティは 2 つのキーワードを受け入れます。最初のキーワードはどの軸用ですか。

カテゴリ
横向き

スクロールバーは、表示時にインラインでボックスモデルのどのスペースを使用しますか?

コンテンツ ボックス
マージン ボックス
境界ボックス
パディング ボックス

ネストされた暗黙的なスクロールでスクロールによる余分な運動量をトラップするには、どのプロパティを使用すればよいですか。

scroll-hint
overscroll-behavior
scroll-padding
scroll-behavior
overscroll-effect

リソース

Smashing Magazine の「CSS でのオーバーフローおよびデータ損失」