CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoverflow: scrollプロパティとは？使い方とサンプルコードを解説

CSSのoverflowプロパティに値scrollを指定すると、要素からはみ出したコンテンツはクリップ（切り取られ）され、スクロールバーが表示されます。これにより、ユーザーはスクロール操作で隠れた部分も含めて、すべてのコンテンツを読むことができるようになります。

なお、overflow: scrollは縦横両方向にスクロールバーが表示される点が特徴です。コンテンツがはみ出していない場合でもスクロールバーが表示されるため、必要なときだけスクロールバーを出したい場合はoverflow: autoを使うのが一般的です。

サンプルコード

以下のコードを実行すると、CSSのoverflow: scrollプロパティの動作を確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: orange;
        width: 250px;
        height: 45px;
        border: 2px solid blue;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <div>ここでoverflowプロパティを使用しています。これはCSSのoverflow: scrollの動作を示すためのデモテキストです。コンテンツは非表示にならず、スクロールバーが表示されます。</div>
  </body>
</html>

実行結果

上記のコードを実行すると、オレンジ色の背景を持つボックス内でテキストがあふれ、ボックスの右側と下側にスクロールバーが表示されます。ユーザーはスクロールバーを操作することで、ボックスからはみ出したテキスト全体を閲覧できます。

overflowプロパティの主な値との違い

  • visible：初期値。はみ出したコンテンツがそのまま表示され、クリップされません。
  • hidden：はみ出したコンテンツがクリップされ、スクロールバーは表示されません。
  • scroll：はみ出したコンテンツがクリップされ、常にスクロールバーが表示されます。
  • auto：コンテンツがはみ出した場合のみ、ブラウザが必要に応じてスクロールバーを表示します。
  1. CSSのoverflow-anchorプロパティでスクロールアンカーを無効化する方法

    Webブラウザには、コンテンツの読み込み中にページが勝手にジャンプするのを防ぐための「スクロールアンカー（scroll anchoring）」という機能が標準で備わっています。しかし、場合によってはこのデフォルトの動作が邪魔になることもあります。そのようなときは、CSSのoverflow-anchorプロパティを使うことで、スクロールアンカーを無効化できます。 overflow-anchorプロパティとは overflow-anchorプロパティは、ブラウザが自動的に選択する「アンカーノード（基準となる要素）」の調整動作を制御します。指定できる値は以下の2つです。 auto：デフォルト値。ブ

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {