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;
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;
Respuestas:
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-height
lugar de height
propiedad.
Para obtener más información, lea este artículo de MDN .
Tienes que agregar una max-height
propiedad.
.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>
Puede configurar:
overflow-y: scroll;height: XX px
Tengo un scroller increíble en mi div-popup
. Para aplicar, agregue este estilo a su elemento div:
overflow-y: scroll;
height: XXXpx;
Lo height
que especifique será la altura del div y una vez que tenga contenido que exceda esta altura, debe desplazarlo.
Gracias.
Para mostrar la barra de desplazamiento vertical en su div, debe agregar
height: 100px;
overflow-y : scroll;
o
height: 100px;
overflow-y : auto;
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: auto
ya que eso lo restringe al desplazamiento vertical. Este es un ejemplo de JSFiddle:
::-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);
}