← トップページに戻る

overflow / スクロール テストページ

1. overflow: hidden（はみ出し非表示）

コンテナからはみ出した部分が切り取られます。スクロールバーは表示されません。

ブロック 1
ブロック 2
ブロック 3
ブロック 4
ブロック 5（見えない）
ブロック 6（見えない）

2. overflow: scroll（常時スクロールバー）

コンテンツがはみ出さなくてもスクロールバーが常に表示されます。

ブロック 1
ブロック 2
ブロック 3
ブロック 4
ブロック 5
ブロック 6

3. overflow: auto（必要時のみスクロールバー）

コンテンツがはみ出す場合のみスクロールバーが表示されます。

3a. はみ出しあり（スクロールバー表示）

ブロック 1
ブロック 2
ブロック 3
ブロック 4
ブロック 5
ブロック 6

3b. はみ出しなし（スクロールバー非表示）

ブロック 1（収まる）

4. overflow-x / overflow-y（軸ごとの制御）

4a. overflow-x: scroll / overflow-y: hidden

横方向のみスクロール可能、縦方向ははみ出し非表示。

横 1
横 2
横 3
横 4
横 5

4b. overflow-x: hidden / overflow-y: auto

縦方向のみスクロール可能、横方向ははみ出し非表示。

縦 1
縦 2
縦 3
縦 4
縦 5
縦 6

4c. overflow-x: auto / overflow-y: scroll

横は必要時のみ、縦は常時スクロールバー。両方向にはみ出すコンテンツ。

両方向 1
両方向 2
両方向 3
両方向 4
両方向 5
両方向 6

5. scroll-snap（スナップスクロール）

5a. 横方向スナップ（カルーセル風）

scroll-snap-type: x mandatory / scroll-snap-align: start — 横にスワイプするとアイテムにスナップします。

スライド 1
スライド 2
スライド 3
スライド 4
スライド 5

5b. 横方向スナップ（center揃え）

scroll-snap-type: x mandatory / scroll-snap-align: center — アイテムが中央にスナップします。

中央 1
中央 2
中央 3
中央 4
中央 5

5c. 縦方向スナップ

scroll-snap-type: y mandatory / scroll-snap-align: start — 縦にスクロールするとアイテムにスナップします。

ページ 1
ページ 2
ページ 3
ページ 4

5d. proximity スナップ

scroll-snap-type: x proximity — スナップポイント近くでのみスナップ。遠くではフリースクロール。

近接 1
近接 2
近接 3
近接 4