Ocultar o mostrar scroll horizontal con CSS

Dentro de la negación por páginas web, el scroll vertical es un elemento de desplazamiento que está más que asumido por el usuario. Si el contenido de portal supera el alto de la pantalla, este elemento permite movernos hacia abajo para visualizarlo todo de manera muy cómoda.

Sin embargo, mucho menos usado es el scroll horizontal, que permite que un contenido muy ancho se salga del ancho de la pantalla y mediante desplazamiento nosotros podamos verlo. Algo que en ocasiones puede sernos de gran utilidad para según qué diseño de interfaz.

Debido al flujo natural en el que se cargan los elementos de una web, cuando un contenido llega al borde derecho de la pantalla, éste pasará inmediatamente hacia abajo y si en total todos los elementos rebasan el alto de pantalla, el scroll vertical aparecerá automáticamente. Sin embargo, precisamente este flujo natural impide que en general aparezca el scroll horizontal y para conseguirlo necesitaremos usar un poco de CSS.

La clase que debemos usar para este cometido es overflow, que controla qué ocurre con el desbordamiento de una capa. Por aclarar, el desbordamiento es qué ocurre con el contenido de un elemento cuando se supera su width o height definido. Con esta propiedad podemos decidir si el contenido se saldrá de ella, se ocultará lo que quede fuera o si forzaremos a que aparezca el scroll.

Para ceñirnos al horizontal debemos usar el atajo overflow-x. Si queremos que se muestre el valor a usar será scroll y por la contra si queremos ocultarlo podemos usar hidden o visible.

/* Muestra el scroll horizontal si el contenido rebasa los 300px */
.elemento-horizontal{
    width: 300px;
    overflow-x: scroll;
}

/* Oculta el scroll horizontal y muestra el contenido sobrepasando los 300px */
.elemento-horizontal{
    width: 300px;
    overflow-x: visible;
}

/* Oculta el scroll y contenido que sobrepase los 300px */
.elemento-horizontal{
    width: 300px;
    overflow-x: hidden;
}

Por defecto, el valor de los elementos HTML es visible, de modo que el uso de ellos atenderá a la maquetación de la página web en cuestión.