Israel Perales

Como crear un contenedor con scroll horizontal

Israel Perales -

Para crear un scroll horizontal nos apoyaremos en las cajas flexibles de CSS (FlexBox), en especial la propiedad display inline-flex.

Creo que en los diferentes navegadores esta muy bien soportado este nuevo modelo de diseño.

Primero definiremos los contenedores:

<section id="main">
	<aside id="horizontal-scroll">
	</aside>
</section>

Como podemos ver es algo muy sencillo, es un contenedor section con un identificador "main" y dentro de el un contenedor aside con un identificador "horizontal-scroll" que sera el padre de todos nuestros elementos que se muestren horizontalmente.

Asi es como se veria el codigo de nuestro maquetado despues de agregar los elementos hijos del contenedor "horizontal-scroll" :

<section id="main">
	<aside id="horizontal-scroll">
    	<article class="item"></article>
        <article class="item"></article>
        <article class="item"></article>
        <article class="item"></article>
        <article class="item"></article>
        <article class="item"></article>
	</aside>
</section>

Ahora comenzaremos con la parte divertida, los estilos:

#main {
    overflow-x:scroll;
    width:100%;
}
#horizontal-scroll {
    display : inline-flex;
    padding:1px;
}
.item {
    border:1px solid black;
    margin: 0px 10px;
    min-width:150px;
    min-height:113px;
    padding: 0px;
}

Nuestro contenedor principal:

  • Tendra un scroll en forma horizontal.
  • Su ancho ocupara todo el espacio disponible.

Nuestra caja mas importante es el contenedor "horizontal-scroll" ,el tendra:

  • display: inline-flex, esta propiedad hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

  • Un padding de 1px.

Después solo daremos estilos a nuestros elementos que queremos mostrar, le diremos que:

  • No tendra margenes arriba y abajo.
  • Borde de 1px color negro.
  • Margenes laterales de 10px.
  • Un ancho minimo de 150px.
  • Una altura minima de 113px.

Y ahora veremos algo como esto:

Fuentes: