Wie mache ich die Bildlaufleiste auf einem Div nur bei Bedarf sichtbar?

151

Ich habe diese div:

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

Die Bildlaufleisten sind immer sichtbar, auch wenn der Text nicht überläuft. Ich möchte, dass die Bildlaufleisten nur bei Bedarf sichtbar sind, dh nur sichtbar, wenn sich genügend Text im Feld befindet, um sie zu benötigen. Wie ein Textbereich. Wie mache ich das? Oder ist meine einzige Möglichkeit, einen Textbereich so zu gestalten, dass er wie ein Div aussieht?

css html scrollbar Benubird
quelle
Was ist damit? Zeigt nur die Bildlaufleiste an, wenn Sie den Mauszeiger darüber halten. Ich bin mir nicht sicher, ob dies für Sie nützlich ist. stackoverflow.com/questions/7125185/…
Ryan Beaulieu
codepen.io/anon/pen/QwLeMG Hoffe das kann dir helfen
vishalkin
overflow: auto;funktioniert nicht auf Android :-(
aioobe

Antworten:

312

Verwenden Sie overflow: auto. Bildlaufleisten werden nur bei Bedarf angezeigt.

(Nebenbemerkung können Sie auch nur für die x- oder y-Bildlaufleiste angeben: overflow-x: autound overflow-y: auto).

Versteckt
quelle
5
Beachten Sie, dass Überlauf-y nur funktioniert, wenn Sie angebenmax-height
Black
1
Überlauf-y benötigt keine maximale Höhe. Ich habe nie max-height mit overflow-y verwendet und es hat jedes Mal funktioniert.
Sumafu
1
@ Sumafu Sie können es je nach Fall benötigen, wie ich jetzt erfahren könnte.
David
1
Sie würden das Überlaufelement benötigen heightoder max-heightfestlegen, wenn Sie es verwenden absoluteoder fixedauf dem Überlaufelement positionieren, da dies verhindert, dass die Größe des Elements basierend auf Seiten- oder Ansichtsfenstergrenzen geändert wird.
Scott Schupbach
15

Versuche dies:

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

Versuchen

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

Versuchen 

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

Ich fand heraus, dass es immer noch eine Höhe von div gibt, ob es Text hat oder nicht. Sie können dies also verwenden, um die besten Ergebnisse zu erzielen.

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

Sie können mit unten versuchen:

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