Come faccio a rendere visibile la barra di scorrimento su un div solo quando necessario?

151

Ho questo div:

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

Le barre di scorrimento sono sempre visibili, anche se il testo non trabocca. Voglio rendere le barre di scorrimento visibili solo quando necessario, ovvero visibili solo quando nella casella è presente del testo sufficiente per renderle necessarie. Come fa una textarea. Come faccio a fare questo? O è la mia unica opzione per modellare un'area di testo in modo che sembri un div?

css html scrollbar

— Benubird
fonte

Che dire di questo. Mostra solo la barra di scorrimento quando passa il mouse sopra. Non sono sicuro che ti sia utile. stackoverflow.com/questions/7125185/…

— Ryan Beaulieu

codepen.io/anon/pen/QwLeMG Spero che questo possa aiutarti

— vishalkin

overflow: auto;non funziona su Android :-(

— aioobe

313

Usa overflow: auto. Le barre di scorrimento verranno visualizzate solo quando necessario.

(Sidenote, puoi anche specificare solo per la barra di scorrimento x, o y: overflow-x: autoe overflow-y: auto).

— Hidde
fonte

5

Nota che overflow-y funziona solo se specifichimax-height

— Black

1

overflow-y non necessita dell'altezza massima. Non ho mai usato l'altezza massima con overflow-y e ha funzionato ogni volta.

— Sumafu,

1

@Sumafu potresti averne bisogno a seconda del caso, come ho potuto sperimentare in questo momento.

— David,

1

Sarà necessario heighto max-heightimpostato se si utilizza absoluteo si fixedposiziona sull'elemento di overflow in quanto impediscono il ridimensionamento dell'elemento in base ai confini della pagina o della finestra.

— Scott Schupbach,

15

prova questo:

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

— kleinohad
fonte

7

provare

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

— pbaris
fonte

6

provare

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

— GrvTyagi
fonte

0

Ho scoperto che c'è ancora altezza del div che mostra ancora, quando ha testo o no. Quindi puoi usarlo per i migliori risultati.

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

— Shailendra Kumar
fonte

0

Puoi provare con quello sotto:

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

— Papun Sahoo
fonte