¿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;
css html scrollbar overflow arrendajo
fuente
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 .

SR verde
fuente
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>
Expandir fragmento

DevT
fuente
20

Puede configurar:

overflow-y: scroll;height: XX px

fuente
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.

Ataboy Josef
fuente
13

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

height: 100px;   
overflow-y : scroll;

o

height: 100px; 
overflow-y : auto;
Ricardo Romo
fuente
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

MitulP91
fuente
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
2 

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Expandir fragmento

GURU PRASAD
fuente
2
Agregue una explicación a su respuesta
Mastisa
la fuente (y la explicación) parece ser: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy