En el mundo del desarrollo web, nos encontramos con desafíos que nos llevan a explorar soluciones innovadoras. En este contexto, surge la necesidad de crear desplazamientos horizontales puros utilizando solo CSS, una hazaña que puede marcar la diferencia en presentaciones y catálogos de productos extensos.
El Problema de lo Vertical en la Web
La mayoría de los sitios web siguen un formato vertical estándar, pero ¿y si queremos romper con esta norma y crear listas horizontales o incluso sitios web horizontales? Aunque la propiedad scroll-direction en CSS no es una realidad, he descubierto una solución intrigante utilizando solo CSS.
Caso de Uso: Presentaciones Horizontales
Imaginemos un escenario donde las presentaciones son la norma y las diapositivas tienen proporciones de 4:3 o 16:9. En esta situación, nos enfrentamos al conflicto entre la horizontalidad de las presentaciones y la verticalidad de las tecnologías web. Aquí es donde entra en juego mi solución.
Una Alternativa sin JavaScript
Existen varias soluciones en JavaScript para este problema, pero me propuse encontrar una solución pura en CSS. La solución resultó ser más directa de lo que esperaba:
Paso 1: Configurar el Contenedor
Creamos un contenedor con elementos hijos. En nuestro ejemplo, el contenedor de desplazamiento lateral tendrá 300 px de ancho, con 8 elementos de 100x100 px cada uno.
.horizontal-scroll-wrapper {
width: 100px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}Los hijos del contenedor se definen así:
.horizontal-scroll-wrapper > div {
width: 100px;
height: 100px;
}Paso 2: Rotar el Contenedor
Rotamos el contenedor -90 grados con una transformación CSS. Esto nos da un desplazamiento horizontal puro.
.horizontal-scroll-wrapper {
transform: rotate(-90deg);
transform-origin: right top;
}Paso 3: Volver a Rotar los Hijos
Para corregir la rotación de los hijos, los volvemos a rotar 90 grados en sentido contrario.
.horizontal-scroll-wrapper > div {
transform: rotate(90deg);
transform-origin: right top;
}Paso 4: Corregir la Posición
Corregimos la posición desplazada ajustando con translateY.
.horizontal-scroll-wrapper {
transform: rotate(-90deg) translateY(-100px);
}Este enfoque ofrece una solución elegante y efectiva para desplazamientos horizontales puros usando solo CSS. Puedes ver una demostración .
Compatibilidad y Consideraciones
Este método ha sido probado en diversas plataformas, pero es importante tener en cuenta la compatibilidad. Según "Can I Use", las transformaciones CSS son compatibles con más del 93% de los usuarios. Sin embargo, se recomienda precaución al implementar esto en entornos de producción, especialmente en dispositivos táctiles donde el desplazamiento puede presentar desafíos.
Conclusión
En el mundo del desarrollo web, encontrar soluciones creativas es esencial. Este enfoque de desplazamiento horizontal puro con CSS ofrece una alternativa intrigante, aunque con ciertas consideraciones de compatibilidad. Al implementarlo con precaución, podrías agregar una dimensión única a tus presentaciones y catálogos en línea. ¡Desafía la verticalidad y haz que tu contenido destaque!