Div con desplazamiento horizontal solamente

89

Tengo un DIV de ancho fijo que contiene una tabla con muchas columnas y necesito permitir que el usuario desplace la tabla horizontalmente dentro del DIV.

Esto debe funcionar solo en IE6 e IE7 (aplicación cliente interna).

Lo siguiente funciona en IE7:

overflow-x: scroll;

¿Alguien puede ayudar con una solución que funcione también en IE6?

html css Richard Ev
fuente
La propiedad overflow-x debería funcionar bien en IE6; puede tener factores de complicación. ¿Puede publicar un caso de prueba que muestre el problema?
Ben Blank
Parece que mi problema está en otra parte: mi contenido DIV se está desbordando en su contenedor.
Richard Ev

Respuestas:

196

La solución es bastante sencilla. Para asegurarnos de que no afectamos el ancho de las celdas de la tabla, desactivaremos los espacios en blanco . Para asegurarnos de obtener una barra de desplazamiento horizontal, activaremos overflow-x . Y eso es todo:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

Puede ver el resultado final aquí o en la animación a continuación. Si la tabla determina la altura de su contenedor, no debería necesitar establecer explícitamente overflow-yen hidden. Pero entienda que también es una opción.

ingrese la descripción de la imagen aquí

Sampson
fuente
4
Me faltaba el white-space: nowrap;. ¡Funciona de maravilla!
AndreFeijo
4
Si una imagen vale más que mil palabras, un gif vale un millón.
HoldOffHunger
Eres el campeón, amigo mío.
Spencer Williams
¿Qué sucede si también necesito un desplazamiento vertical individual en cada columna y no un desplazamiento vertical en el contenedor principal? Estoy tratando de hacer eso con white-space: nowrap;el contenedor principal y la configuración heighty overflow-y: scrollen columnas individuales, pero no funciona.
Sachin
espacio en blanco: nowrap; ¡Siempre caigo en eso! gracias respuesta impresionante!
talsibony
68

No pude hacer que la respuesta seleccionada funcionara, pero después de investigar un poco , descubrí que el div de desplazamiento horizontal debe tener white-space: nowrapen el CSS.

Aquí está el código de trabajo completo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>
SEMANAS
fuente
2
La sugerencia de "espacio en blanco: nowrap" parece haberse mezclado con la respuesta correcta. +1 para mejorar la respuesta aceptada.
HoldOffHunger
21 
overflow-x: scroll;
overflow-y: hidden;

EDITAR:

Esto funciona para mi:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
Diodeus - James MacFarlane
fuente
18

Para el desplazamiento horizontal, tenga en cuenta estas dos propiedades:

overflow-x:scroll;
white-space: nowrap;

Ver enlace de trabajo: haz clic en mí

HTML

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

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
ankitd
fuente
5

prueba esto:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

El espacio en blanco: nowrap; la propiedad no le permite ajustar el texto. Vea aquí un ejemplo: https://codepen.io/oezkany/pen/YoVgYK

oezkany
fuente