DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

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:

  • Definir el largo (height) del contenedor padre
  • Indicar que no queremos scrolling vertical (obvio verdad)
  • Habilitar el scrolling horizontal (más obvio todavía)

¿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

Eye Candy

Eye Candy

Loader cuadrado

Loader cuadrado

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015

¿Qué es LESS CSS?

¿Qué es LESS CSS?

LESS CSS es una extensión de CSS que nos permite agregar dinamismo al CSS tradicional.

Andrés Cruz 12-09-2013

La pseudo-class :empty en CSS

La pseudo-class :empty en CSS

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

Andrés Cruz 15-12-2014