オーバーフロー

The CSS Podcast - 034: Overflow

コンテンツが親要素の範囲を超えた場合、さまざまな処理方法があります。スクロールしてスペースを追加したり、オーバーフローしたエッジをクリップしたり、省略記号で切り捨てを示したりできます。オーバーフローは、スマートフォン アプリケーションや複数の画面サイズ向けに開発する場合に特に重要です。

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

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

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

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

overflow プロパティの使用

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

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

縦軸と横軸のスクロール

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

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

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

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

overflow の略記

overflow のショートハンドは、overflow-x と overflow-y の両方のスタイルを 1 行で設定します。

overflow: hidden scroll;

2 つのキーワードが指定されている場合、1 つ目は overflow-x に、2 つ目は overflow-y に適用されます。それ以外の場合、overflow-x と overflow-y は同じ値を使用します。

値

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

overflow: visible（デフォルト）

プロパティを設定しない場合、ウェブのデフォルト値は overflow: visible です。これにより、コンテンツが意図せず非表示になることがなく、「コンテンツを非表示にしない」または「正確なレイアウトの安全なレイアウト」という基本原則に沿ったものになります。

overflow: hidden

overflow: hidden を使用すると、コンテンツは指定された方向にクリップされ、表示するためのスクロールバーは提供されません。

overflow: scroll

overflow: scroll は、ユーザーがコンテンツをスクロールできるようにスクロールバーを有効にします。コンテンツがオーバーフローしていない場合でも、スクロールバーが表示されます。これは、たとえばサイズ変更に基づいてコンテナが将来スクロール可能になる可能性がある場合に、将来のレイアウト シフトを減らし、スクロール可能な領域をユーザーに視覚的に準備するのに最適な方法です。

overflow: clip

overflow: hidden と同様に、overflow: clip のコンテンツは要素のパディング ボックスにクリップされます。clip と hidden の違いは、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 プロパティを使用して、スクロール可能になることを視覚的に示します。

Using CSS to Enforce Accessibility では、Adrian Roselli が CSS を使用してアクセシビリティの回帰を防ぐ方法を紹介しています。たとえば、正しい属性が使用されている場合にのみスクロールをオンにしてフォーカス インジケーターを追加します。次のルールでは、ボックスに tabindex、aria-labelledby、role 属性がある場合にのみ、ボックスをスクロール可能にします。

[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-index を最上位に設定することで、スクロール プロモーションを使用できます。ルート スクロールとネストされた暗黙的スクロールの比較については、こちらをご覧ください。

スクロールバーのスタイルを設定する

スクロールバーのスタイルを設定して、サイトのデザインに組み込むことができます。scrollbar-color は、スクロールバーのつまみとガターの色を設定します。

スクロールバーの幅を変更するには、scrollbar-width を使用します。任意の長さに設定することはできませんが、thin スクロールバーまたは none を指定することはできます。

scroll-behavior

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

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

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

overscroll-behavior

モーダル オーバーレイの末尾に到達した後もスクロールを続け、オーバーレイの背後にあるページが移動したことがある場合、これはスクロール チェーン、または親スクロール コンテナへのバブリングです。overscroll-behavior プロパティを使用すると、オーバーフロー スクロールが親コンテナに漏れるのを防ぐことができます（スクロール チェーン）。

スクロール スナップ

スクロールは通常スムーズで、スクロールポート内のコンテンツを好きな場所に配置できます。画像ギャラリーや、ページやスライドをエミュレートするコンテンツなど、一部のデザインでは、コンテンツをスクロールポートにスナップさせたい場合があります。

スクロール コンテナを設定する

スクロール スナップを有効にするには、スクロール コンテナに scroll-snap-type を追加します。まず、スクロール スナップが発生する軸を定義します。これは、論理プロパティ（block または inline）、物理プロパティ（x または y）、または both になります。

スクロール スナップの厳密さを定義することもできます。デフォルトの厳密さは proximity です。つまり、スクロール コンテナは可能な限りスナップを試みます。厳密さを mandatory に設定して、スクロール コンテナが常にスナップするようにすることもできます。

.scroll-container {
    scroll-snap-type: block mandatory;
}

スクロール スナップは、スクロール コンテナの境界内に要素を配置しますが、スクロール コンテナの一部が表示されない場合はどうなるでしょうか？たとえば、スクロール コンテナの一部に固定ヘッダーが重なっている場合があります。スナップされた要素をスクロール コンテナの表示部分に合わせるには、scroll-padding を設定します。

スナップ可能な要素を制御する

要素をスナップ可能にするには、scroll-snap-align プロパティを start、end、または center に設定します。スクロール スナップの方向が both の場合は、2 つの値を設定できます。要素の端をスクロールポートの端に揃えるか、中央に配置するかを設定します。

スナップされた要素の端の周囲の間隔は、scroll-margin で調整できます。

scroll-margin は、要素にスクロールする際のパディングを設定するためにも使用されます。

スクロールをより粘着性のあるものにするには、スクロール コンテナ内のアイテムに scroll-snap-stop: always を追加します。1 回のスクロールで複数のアイテムをスクロールすることは可能です。慣性でスクロールが継続するような形でスクロール動作を終了した場合、スクロールは継続されず、次のスナップ位置で終了します。

理解度を確認する

リソース

Smashing Magazine の CSS のオーバーフローとデータ損失