Hacer un div verticalmente desplazable mediante CSS

Question

Este

<div id="" style="overflow:scroll; height:400px;">

da una div que el usuario puede desplazarse tanto en horizontal como en vertical. ¿Cómo lo cambio para que el div sea solo desplazable verticalmente?

Answer 1

Lo tiene cubierto aparte de utilizar la propiedad incorrecta. La barra de desplazamiento puede ser activado con cualquier propiedad overflow, overflow-x o overflow-y y cada uno se puede ajustar a cualquiera de visible, hidden, scroll, auto, o inherit. En este momento está buscando en estos dos:

• auto - Este valor se verá en la anchura y la altura de la caja. Si se definen, no permitirá que la caja se expanda más allá de esos límites. En cambio (si el contenido excede esos límites), creará una barra de desplazamiento para cualquier límite (o ambos) que exceda su longitud.

• scroll - Estos valores fuerzas una barra de desplazamiento, no importa lo que, incluso si el contenido no exceda el conjunto de contornos. Si el contenido no necesita desplazarse, la barra aparecerá como "deshabilitada" o no interactiva.

Si siempre desea que aparezca la barra de desplazamiento vertical:

Debe utilizar overflow-y: scroll. Este fuerza una barra de desplazamiento para que aparezca para el eje vertical, ya sea que se necesite o no. Si no puede desplazarse por el contexto, aparecerá como una barra de desplazamiento "deshabilitada".

Si sólo desea una barra de desplazamiento que aparezca si se puede desplazar la caja:

sólo tiene que utilizar overflow: auto. Dado que su contenido por defecto simplemente pasa a la siguiente línea cuando no cabe en la línea actual, no se creará una barra de desplazamiento horizontal (a menos que esté en un elemento que tenga desactivado el ajuste de palabras). Para la barra vertical, permitirá que el contenido se expanda hasta la altura que haya especificado. Si excede esa altura, mostrará una barra de desplazamiento vertical para ver el resto del contenido, pero no mostrará una barra de desplazamiento si no supera la altura.

Answer 2

Pruebe así.

<div style="overflow-y: scroll; height:400px;">

Answer 3

Uso overflow-y: auto; en el div.

Además, también debe establecer el ancho.

Answer 4

Puede usar este código en su lugar.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;"> 

desbordamiento-x: La propiedad overflow-x especifica qué hacer con los bordes izquierdo/derecho del contenido - si se desborda el área de contenido del elemento.
overflow-y: La propiedad overflow-y especifica qué hacer con los bordes superior e inferior del contenido, si se desborda el área de contenido del elemento.

Valores
visible: Valor predeterminado. El contenido no está recortado y puede representarse fuera del cuadro de contenido.
oculto: El contenido está recortado, y no se proporciona ningún mecanismo de desplazamiento.
scroll: El contenido está recortado y se proporciona un mecanismo de desplazamiento.
auto: Debe provocar que se proporcione un mecanismo de desplazamiento para las cajas desbordadas.
inicial: establece esta propiedad a su valor predeterminado.
inherit Hereda esta propiedad de su elemento primario.

Answer 5

El problema con todas estas respuestas fue que no respondieron. Tenía que tener una altura fija para un div principal que no quería. Tampoco quería perder mucho tiempo dinking con las consultas de los medios. Si está utilizando angular, puede usar el conjunto de pestañas bootstraps y hará todo el trabajo duro por usted. Podrás desplazarte por el contenido interno y será receptivo. Cuando configura la pestaña, hágalo así: $scope.tab = { title: '', url: '', theclass: '', ative: true }; ... el punto es que no desea un título o icono de imagen. a continuación, ocultar el contorno de la pestaña en cs así: .nav-tabs { border-bottom:none; } y también esta .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} y, finalmente, de quitar el precinto invisible que todavía se puede hacer clic en si no se implementa esto: .nav > li > a {padding:0px;margin:0px;}

Answer 6

Para uso del 100% de altura de visualización :

overflow: auto; 
max-height: 100vh; 

Answer 7

puede utilizar overflow-y: scroll para el desplazamiento vertical.

<div style="overflow-y:scroll; height:400px; background:gray"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    
 
</div>