DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
06-12-2016

Recientemente estuve revisando algunos recursos en la web y encontré uno realmente sencillo que en más de una ocasión necesitamos emplear pero puede que no sea del todo lógico o sencilla la idea de implementar.

Se trata del scroll horizontal como el siguiente:

animación de un Scrolling Horizontal

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:

¿Ahora como hacemos los dos últimos pasos con CSS?, bastante fácil en realidad:

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

Las líneas anteriores se explican solas 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.

De una vez definimos el tamaño 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.

Ahora definimos el siguiente CSS para nuestros hijos el cual no requiere de mayor explicación:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema sola con CSS

Sistema sola con CSS

Creando un pulso con CSS

Creando un pulso con CSS

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Múltiples fondos animados con CSS

Múltiples fondos animados con CSS

En este artículo explicaremos en base a un ejemplo cómo crear múltiples fondos anidados animándolos con un poco de CSS3.

Andrés Cruz 06-01-2014

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017