divのスクロールバーを必要な場合にのみ表示するにはどうすればよいですか？

151

私はこのdivを持っています：

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

テキストがオーバーフローしていなくても、スクロールバーは常に表示されています。スクロールバーを必要なときだけ表示するようにしたい-つまり、ボックスに十分なテキストがあり、必要なときにだけ表示する。textareaのように。どうすればよいですか？それとも、divのように見えるようにテキストエリアをスタイルする唯一のオプションですか？

css html scrollbar

— ベヌバード
ソース

これはどうですか。ホバーするとスクロールバーのみを表示します。これがあなたに役立つかどうかわかりません。stackoverflow.com/questions/7125185/…–

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMGこれがお役に立てば幸い

— vishalkin 2014年

overflow: auto;Androidでは機能しません:-(

— aioobe 2017

312

を使用しoverflow: autoます。スクロールバーは必要な場合にのみ表示されます。

（補足：xまたはyスクロールバーのみを指定することもできます：overflow-x: autoおよびoverflow-y: auto）。

— 隠し
ソース

5

overflow-yは、指定した場合にのみ機能することに注意してくださいmax-height

— Black

1

overflow-yはmax-heightを必要としません。私はmax-heightをoverflow-yと一緒に使用したことがなく、常に機能しました。

— スマフ

1

@スマフは、私が今体験できるように、場合によってはそれが必要になるかもしれません。

— デビッド

1

オーバーフロー要素を使用または配置している場合は、要素がページまたはビューポートの境界に基づいてサイズ変更されないようにする必要があるheightか、max-height設定する必要があります。absolutefixed

— Scott Schupbach

15

これを試して：

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— クライノハド
ソース

7

試す

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

— pbaris
ソース

6

試す

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

— GrvTyagi
ソース

0

テキストがあるかどうかにかかわらず、divの高さがまだ表示されていることがわかりました。したがって、これを使用して最良の結果を得ることができます。

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

— シャイレンドラ・クマール
ソース

0

以下のいずれかで試すことができます：

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>

— パプンサフー
ソース