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

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