¿Cómo se agrega una barra de desplazamiento a un div?

Tengo una ventana emergente que muestra algunos resultados, y quiero que se muestre una barra de desplazamiento ya que los resultados se recortan (y no quiero que la ventana emergente sea demasiado larga).¿Cómo se agrega una barra de desplazamiento a un div?

Fuente

2010-05-14 Blankman

Debe agregar style="overflow-y:scroll;" a la etiqueta div. (Esto forzará una barra de desplazamiento en la vertical).

Si sólo desea una barra de desplazamiento cuando sea necesario, simplemente hacer overflow-y:auto;

Fuente

2010-05-14 18:59:41

<div class="scrollingDiv">foo</div> 

div.scrollingDiv 
{ 
    overflow:scroll; 
}

Fuente

2010-05-14 19:00:21 Gabe

@webdestroya: Sólo se añadirá el desplazamiento a divs que tienen el nombre de clase de "scrollingDiv". Eso podría ser tan poco como 1, o incluso 0, o tantos como todos los divs el diseñador desea tener barras de desplazamiento. – Robusto

Bueno, ahora lo habrá actualizado :) –

@webdestroya: No lo toqué. Y la publicación no se mostró como editada cuando comencé. Nosotros. – Robusto

clase CSS para tener una buena Div con desplazamiento

.DivToScroll{ 
    background-color: #F5F5F5; 
    border: 1px solid #DDDDDD; 
    border-radius: 4px 0 4px 0; 
    color: #3B3C3E; 
    font-size: 12px; 
    font-weight: bold; 
    left: -1px; 
    padding: 10px 7px 5px; 
} 

.DivWithScroll{ 
    height:120px; 
    overflow:scroll; 
    overflow-x:hidden; 
}

Fuente

2012-10-24 19:24:48

He agregado un jsfiddle de esta versión - http://jsfiddle.net/YjxS8/ – DaveHogan

<head> 
<style> 
div.scroll 
{ 
background-color:#00FFFF; 
width:40%; 
height:200PX; 
FLOAT: left; 
margin-left: 5%; 
padding: 1%; 
overflow:scroll; 
} 


</style> 
</head> 

<body> 



<div class="scroll">You can use the overflow property when you want to have better  control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div> 


</body> 
</html>

Fuente

2014-06-20 02:35:29 Daveontrak

Si desea para agregar una barra de desplazamiento usando jquery, lo siguiente funcionará. Si su div tenía un ID de 'mydiv' que nos podría el siguiente selector de ID con jQuery propiedad CSS:

jQuery('#mydiv').css("overflow-y", "scroll");

Fuente

2014-08-29 16:24:10 ScottyG

Es correcto, donde hay que agregarlo dinámicamente con jquery. Esto funciona para mi. Gracias –

@Chaki_Black gran punto. Agregué una respuesta similar a una pregunta sobre desplazamiento dinámico en un div aquí (http://stackoverflow.com/a/36314963/2512022) – ScottyG

¿Cómo se agrega una barra de desplazamiento a un div?

Respuesta

Cuestiones relacionadas