Scrolling horizontal con puro CSS

Muchas veces cuando estamos realizando el diseño de una web tenemos que apilar de manera horizontal recursos o contenedores y que estos los podemos desplazar de izquierda a derecha o de derecha a izquierda; aunque no solo tienen que ser contenedores, puede ser que quieras que tu web sea de forma horizontal, un sitio o web horizontal.

En esta entrada veremos cómo crear un el scroll horizontal o lateral sobre un grupo de contenedores o div como el siguiente:

En realidad es bastante sencilla y NO necesitas JavaScript para que funcione o algun plugin "mágico" solo unos sencillos pasos que tiene que tener en mente; aunque tampoco es tan simple como definir una regla CSS en el que indicamos que nuestros contenedores se muestren de manera horizontal y por lo tanto se desplacen de manera horizontal, tenemos que hacer algunas cosas como las siguientes:

• Definir el largo (height) del contenedor padre.
• Indicar que no queremos scrolling vertical.
• Habilitar el scrolling horizontal.

Para realizar los dos últimos pasos nos basta con aplicar un par de reglas CSS y sus correspondientes valores:

overflow-y: hidden; 
overflow-x: auto;

Las líneas anteriores se explican solas; con overflow-y con el valor hidden indica que ocultemos todo el contenido que sobresalga de nuestro contenedor (si configuramos bien el CSS esto paso puede ser opcional); con overflow-x con el valor auto indicamos que queremos scroll horizontal solo cuando sea necesario.

CSS del contenedor padre para el scrolling horizontal

El siguiente CSS es el empleado para el contenedor padre que es el que realizará el desplazamiento horizontal; de una vez definimos el tamaño y el ancho de nuestro padre:

width: auto;
height: 50px;
padding: 10px;
white-space: nowrap;

En general, solo establecimos en tamaño de nuestro contenedor padre y el espaciado o margen interno; con la propiedad white-space se emplea para especificar cómo manejar el espacio en blanco dentro del contenedor, con el valor nowrap indicamos que no hay saltos de líneas o pausas; es decir, se muestra todo el contenido dentro de una fila, y es el corazón de nuestro experimento del scrolling horizontal; otro punto importante es que estamos definiendo un alto del contenedor fijo que es de 50px y el ancho del contenedor lo definimos como auto entonces podrá crecer tanto como sea necesario.

CSS de los hijos

Ahora definimos el siguiente CSS para nuestros hijos el cual no requiere de mayor explicación; simplemente estamos creando pequeñas cajas:

width: 100px;
height: 50px;
margin: 0 10px 0 0;
padding: 0;
display: inline-block;

Como punto importante, es que los hijos tengan el mismo tamaño o menor al del padre, el display: inline-block para mostrar el contenido en una linea, resto del código es opcional y puedes consultarlos en los enlaces de descarga; finalmente el HTML de nuestro experimento:

<div class="horizontal-scroll-contenedor">
	<div>Contenedor 1</div>
	<div>Contenedor 2</div>
	<div>Contenedor 3</div>
	<div>Contenedor 4</div>
	<div>Contenedor 5</div>
	<div>Contenedor 6</div>
	<div>Contenedor 7</div>
	<div>Contenedor 8</div>
	<div>Contenedor 9</div>
	<div>Contenedor 10</div>
	<div>Contenedor 11</div>
	<div>Contenedor 12</div>
	<div>Contenedor 13</div>
	<div>Contenedor 14</div>
	<div>Contenedor 15</div>
	<div>Contenedor 16</div>
	<div>Contenedor 17</div>
	<div>Contenedor 18</div>
	<div>Contenedor 19</div>
	<div>Contenedor 20</div>
</div>

Y puedes ver el ejemplo a continuación:

Extra desplazando de manera automática con jQuery: .scrollLeft()

Aunque dijimos que no emplearíamos JavaScript para este experimento o tutorial de igual manera vamos a explicar un extra en la cual podemos potenciar el experimento anterior, simplemente vamos emplear la función .scrollLeft() para movernos de manera horizontal, esto es perfecto si queremos que el scroll se mueva de manera automática; simplemente debemos de emplear la función .scrollLeft() la cual recibe como parámetro una cantidad numérica la cual define la cantidad de pixeles que vamos a desplazarnos; es decir, para movernos 200 píxeles:

$(".horizontal-scroll-contenedor").scrollLeft(200)