overflow-y
overflow-y
は CSS のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。
試してみましょう
構文
/* キーワード値 */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;
/* グローバル値 */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: unset;
overflow-y
プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
overflow-x
が hidden
, scroll
, auto
であり、このプロパティが visible
(既定値) である場合は、暗黙的に auto
と計算されます。
値
visible
-
内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。
-
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
clip
Experimental-
hidden
と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。clip
とhidden
の違いは、clip
キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、display: flow-root
を使用して実現することができます。 scroll
-
垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は
visible
と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
公式定義
初期値 | visible |
---|---|
適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible /clip はそれぞれ auto /hidden と計算される |
アニメーションの種類 | 離散値 |
形式文法
例
overflow-y の動作を設定
HTML
<ul>
- <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>
- <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>
- <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>
- <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;
}
結果
仕様書
Specification |
---|
CSS Overflow Module Level 3 # overflow-properties |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
text-overflow
,white-space
,overflow
,overflow-x
,clip
,display