HTMLの「overflow:auto」と「overflow:scroll」の違い


123

overflowプロパティの値を調べていたとき、これらの2つの値に出くわしました:autoおよびscrollは、コンテンツが要素をオーバーフローした場合にスクロールバーを追加します。

誰かがそれらの違いを教えてくれませんか?

回答:


185

Autoは、コンテンツがクリップされている場合にのみスクロールバーを表示します。

ただし、すべてのコンテンツが収まり、スクロールできない場合でも、Scrollは常にスクロールバーを表示します。


2
Safariの最新バージョンでは、少なくとも違いはないようです。を使用してもscroll、コンテンツが収まる場合はスクロールバーが表示されません。しかし、auto念のため、コンテンツがクリップされたときにのみスクロールバーを表示したいので、私は行きました。
ma11hew28

1
@MattDiPasquale OS XとWindowsでは、スクロールバーの表示方法が異なります。あなたはおそらくMacでSafariを使用していますか?OS Xは、実際にスクロールするまでスクロールバーを非表示にすることがよくあります。
Johan Davidsson 2013年

1
それよりも違いがあるようでoverlow: scroll、ボックスが薄くなっています:jsbin.com/letog/2/edit
Dmitri Zaitsev

スクロールバーを常に表示するように設定、されていない限り、サファリ12(おそらく以前のバージョンすぎ)で、overflow: scrollかつoverflow: auto機能的に同一であり、コンテナは、コンテンツを格納するための十分な大きさであるとき。
ルーク・ワース

15

overflow: scrollオーバーフローするコンテンツをすべて非表示にし、問題の要素にスクロールバーを表示します。コンテンツがオーバーフローしない場合でも、スクロールバーは表示されますが無効になります。

overflow: auto は非常に似ていますが、スクロールバーはコンテンツがオーバーフローしているときにのみ表示されます。

ここでも同様の説明があり、ポイントを説明するスクリーンショットがいくつかあります。


2

見てくださいCSSのトリックを

Autoは、コンテンツがオーバーフローした場合にのみスクロールバーを表示します。ただし、コンテンツがオーバーフローしているかどうかにかかわらず、scrollは常にスクロールバーを表示します。



0

オーバーフロー:scrollは、水平スクロールバーと垂直スクロールバーの両方が必要ない場合でも表示されます。一方、overflow:autoはdivが必要とするスクロールバーを表示します。したがって、基本的にautoは、両方のscollbarを取り除くのに役立ちます。以下はその詳細です。

https://css-tricks.com/the-css-overflow-property/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.