Jak sprawić, by pasek przewijania elementu div był widoczny tylko wtedy, gdy jest to konieczne?

151

Mam ten div:

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

Paski przewijania są zawsze widoczne, nawet jeśli tekst się nie przepełnia. Chcę, aby paski przewijania były widoczne tylko wtedy, gdy jest to konieczne - to znaczy tylko wtedy, gdy w polu jest wystarczająco dużo tekstu, że są potrzebne. Tak jak robi to textarea. Jak mam to zrobic? A może jedyną opcją jest stylizacja obszaru tekstowego tak, aby wyglądał jak element div?

css html scrollbar Benubird
źródło
A co z tym. Pokazuje tylko pasek przewijania po najechaniu kursorem. Nie jestem pewien, czy to ci się przyda. stackoverflow.com/questions/7125185/…
Ryan Beaulieu
codepen.io/anon/pen/QwLeMG Mam nadzieję, że to ci pomoże
vishalkin
overflow: auto;nie działa na Androidzie :-(
aioobe

Odpowiedzi:

313

Użyj overflow: auto. Paski przewijania pojawiają się tylko wtedy, gdy są potrzebne.

(Uwaga dodatkowa, możesz również określić tylko dla paska przewijania x lub y: overflow-x: autoi overflow-y: auto).

Hidde
źródło
5
Zwróć uwagę, że overflow-y działa tylko wtedy, gdy określiszmax-height
Black
1
overflow-y nie wymaga maksymalnej wysokości. Nigdy nie używałem max-height z overflow-y i działało za każdym razem.
Sumafu
1
@Sumafu, możesz go potrzebować w zależności od przypadku, jak mogłem teraz doświadczyć.
David
1
Będziesz potrzebować heightlub max-heightustawić, jeśli używasz absolutelub fixedumieszczasz na elemencie przepełnienia, ponieważ zapobiegają one zmianie rozmiaru elementu w oparciu o granice strony lub rzutni.
Scott Schupbach
15

Spróbuj tego:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
kleinohad
źródło
7

próbować

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>
pbaris
źródło
6

próbować 

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">
GrvTyagi
źródło
0

Zauważyłem, że nadal jest wyświetlana wysokość elementu div, niezależnie od tego, czy zawiera tekst, czy nie. Możesz więc użyć tego, aby uzyskać najlepsze wyniki.

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>
Shailendra Kumar
źródło
0

Możesz spróbować z poniższym:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
Papun Sahoo
źródło