CSSoverflow-y プロパティは、ブロックレベル要素の内容が上下の境界からあふれた場合に、切り取って表示するのか、スクロールバーを表示するのか、あふれさせて表示するのかを指定します。

overflow-xhidden, scroll, auto であり、このプロパティが visible (既定値) である場合は、暗黙的に auto と計算されます。

構文

/* キーワード値 */
overflow-y: visible;
overflow-y: hidden;
overflow-y: scroll;
overflow-y: auto;

/* グローバル値 */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;

overflow-y プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

visible
内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。
hidden
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
scroll
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
auto
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

形式文法

visible | hidden | clip | scroll | auto

HTML

<ul>
  <li><code>overflow-y:hidden</code> — ボックスの外側のテキストを隠す
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:scroll</code> — 常にスクロールバーを表示
  <div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:visible</code> — 必要に応じてテキストをボックスの外に表示
  <div id="div3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
  <div id="div4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
  

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-y: hidden; margin-bottom: 12px;}
#div2 { overflow-y: scroll; margin-bottom: 12px;}
#div3 { overflow-y: visible; margin-bottom: 120px;}
#div4 { overflow-y: auto; margin-bottom: 120px;}

結果

仕様書

仕様書 状態 備考
CSS Overflow Module Level 3
overflow-y の定義
草案  
初期値visible
適用対象ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121.5

5

8 -ms-

9.53
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり4 あり あり あり

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,