¿Cómo hago que la barra de desplazamiento en un div solo sea visible cuando sea necesario?

151

Tengo este div:

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

Las barras de desplazamiento siempre están visibles, aunque el texto no se desborde. Quiero hacer que las barras de desplazamiento solo sean visibles cuando sea necesario, es decir, solo visibles cuando haya suficiente texto en el cuadro que sean necesarias. Como lo hace un área de texto. ¿Cómo hago esto? ¿O es mi única opción para diseñar un área de texto para que parezca un div?

css html scrollbar Benubird
fuente
¿Qué hay de esto? Muestra solo la barra de desplazamiento cuando se desplaza sobre él. No estoy seguro si esto es útil para usted. stackoverflow.com/questions/7125185/…
Ryan Beaulieu
codepen.io/anon/pen/QwLeMG Espero que esto pueda ayudarlo
vishalkin
overflow: auto;no funciona en Android :-(
aioobe

Respuestas:

312

Uso overflow: auto. Las barras de desplazamiento solo aparecerán cuando sea necesario.

(Nota al margen, también puede especificar solo para la barra de desplazamiento x, o y: overflow-x: autoy overflow-y: auto).

Hidde
fuente
55
Tenga en cuenta que overflow-y solo funciona si especificamax-height
Negro
1
overflow-y no necesita max-height. Nunca usé max-height con overflow-y y funcionó todo el tiempo.
Sumafu
1
@Sumafu, es posible que lo necesite según el caso, como pude experimentar ahora.
David
1
Necesitaría heighto max-heightestablecería si está utilizando absoluteo fixedcoloca en el elemento de desbordamiento, ya que esto evita que el elemento cambie de tamaño en función de los límites de la página o la ventana gráfica.
Scott Schupbach
15

prueba esto:

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

tratar

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

tratar 

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

Descubrí que todavía hay una altura de div, cuando tiene texto o no. Entonces puede usar esto para obtener mejores resultados.

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

Puedes probar con el siguiente:

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