DesarrolloLibre

Desarrollo Web, Android 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

Css3 Spinners

Css3 Spinners

Efectos hover con CSS

Efectos hover con CSS

Loader Battlenet

Loader Battlenet

Algunos artículos que te pueden interesar

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Las curvas de béziers en las animaciones CSS: caso Google Chrome

Los loaders son un recurso de los más vistosos y necesarios en cualquier aplicación al momento de realizar una tarea que requiera tiempo; en esta entrada veremos cómo crear un par de loaders.

Andrés Cruz 15-10-2015

Uso de cursores con CSS

Uso de cursores con CSS

Con la propiedad cursor que veremos a continuación podemos cambiar el aspecto del cursor sobre ciertos elementos en nuestra web.

Andrés Cruz 22-08-2013

Botones con fondo corredizo en CSS

Botones con fondo corredizo en CSS

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo.

Andrés Cruz 21-04-2015