¿Cómo puedo agregar una barra de desplazamiento vertical a mi div automáticamente?


110

Quiero agregar una barra de desplazamiento vertical a mi <div>. Lo he intentado overflow: auto, pero no funciona. Probé mi código en Firefox y Chrome.

Estoy pegando el código de estilo div aquí:

float: left;
width: 1000px;
overflow: auto;

un jsfiddle o más CSS con su marcado
Ritabrata Gautam

12
Prueba esto: overflow-y:scrolly algo de altura . Revisa estos documentos .
Mr_Green

Gracias Mr_Green por su respuesta. Pero este código no me funciona.
jay

Para que el Scroll funcione, el contenido interior debe desbordarse .
Mr_Green

Publique su código html y css aquí.
Mr_Green

Respuestas:


145

Debe asignar algo de altura para que la overflow: auto;propiedad funcione.
Para fines de prueba, agregue height: 100px;y verifique.
y también será mejor si das en overflow-y:auto;lugar de overflow: auto;, porque esto hace que el elemento se desplace solo en vertical pero no en horizontal.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Si no conoce la altura del contenedor y desea mostrar la barra de desplazamiento vertical cuando el contenedor alcanza una altura fija 100px, digamos , utilice en max-heightlugar de heightpropiedad.

Para obtener más información, lea este artículo de MDN .


Sí, entendí tu punto y lo probé, funciona bien en Chrome pero no en FireFox. Una cosa más confusa es que la barra de desplazamiento vertical aparece en el tiempo de carga de la página en FF, ¡pero desaparece cuando se completa la carga de la página!
jay

"Necesitas asignar algo de altura" exactamente mi problema, ¡gracias! : P
Wagner da Silva

51

Tienes que agregar una max-heightpropiedad.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>


20

Puede configurar:

overflow-y: scroll;height: XX px

2
esto ha sido sugerido por respuestas anteriores.
UmNyobe

14

Tengo un scroller increíble en mi div-popup. Para aplicar, agregue este estilo a su elemento div:

overflow-y: scroll;
height: XXXpx;

Lo heightque especifique será la altura del div y una vez que tenga contenido que exceda esta altura, debe desplazarlo.

Gracias.


13

Para mostrar la barra de desplazamiento vertical en su div, debe agregar

height: 100px;   
overflow-y : scroll;

o

height: 100px; 
overflow-y : auto;

10

No estoy muy seguro de para qué está intentando usar el div, pero este es un ejemplo con texto aleatorio.

Mr_Green dio las instrucciones correctas cuando dijo agregar, overflow-y: autoya que eso lo restringe al desplazamiento vertical. Este es un ejemplo de JSFiddle:

JSFiddle


En primer lugar, @Mr_Green, su sugerencia funciona bien en Chrome pero no en FF. Y hay alguna alternativa para agregar Altura, porque no puedo agregar Altura a mi Div para mi estructura de diseño.
jay

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.