Mejora la Experiencia de Desplazamiento con CSS Snap Scroll Horizontal (2023)

El desplazamiento suave y efectivo en las páginas web es esencial para brindar una experiencia de usuario óptima, especialmente en sitios con secciones a pantalla completa o en dispositivos táctiles. La implementación inteligente de CSS Snap Scroll Horizontal es la clave para lograrlo. En este artículo, exploraremos cómo utilizar esta técnica para crear sitios web con desplazamiento horizontal a pantalla completa.

Ventajas de CSS Snap Scroll

CSS Snap Scroll se revela como la solución ideal para mejorar la experiencia de desplazamiento en dispositivos táctiles y móviles. Si buscas un sitio web compatible con dispositivos de escritorio, la respuesta es fullpage.js. Esta biblioteca ofrece una opción que permite el desplazamiento horizontal al utilizar la rueda del ratón o el trackpad.

Creación del Contenedor de Desplazamiento

Para implementar CSS Snap Scroll Horizontal, primero necesitamos un elemento contenedor que envuelva las secciones que atraerán el desplazamiento. Este elemento, llamado "contenedor de desplazamiento," puede ser un elemento principal (<main> en este caso). Las secciones se añaden dentro de este contenedor.

html, body {
  font-family: sans-serif;
  margin: 0;
  height: 100%;
}

main {
  height: 100%;
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

Alineación Horizontal con Flexbox

Utilizamos CSS3 Flexbox para alinear horizontalmente cada sección dentro del contenedor principal.

main {
  height: 100%;
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 100vw;
  font-size: 3.5ch;
  scroll-snap-align: start;
}

section:nth-child(odd) {
  background: black;
  color: white;
}

Ajuste del Alto de las Secciones

Ajustamos la altura de las secciones para excluir el ancho de la barra de desplazamiento de la unidad de vista (vh).

section {
  height: calc(100vh - var(--scrollbar-width));
}

Exclusión del Ancho de la Barra de Desplazamiento

Dado que las unidades de vista como vh incluyen la barra de desplazamiento, utilizamos JavaScript para calcular el ancho de la barra y ajustar dinámicamente la altura de las secciones.

function _calculateScrollbarWidth() {
  document.documentElement.style.setProperty('--scrollbar-width', window.innerWidth - document.documentElement.clientWidth + 'px');
}

document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false);
window.addEventListener('load', _calculateScrollbarWidth);
window.addEventListener('resize', _calculateScrollbarWidth, false);

Conclusión y Recomendación

Si te entusiasma el desplazamiento snap (como a nosotros), fullPage.js es la respuesta a todos los desafíos de compatibilidad entre navegadores y dispositivos. Esta biblioteca bien documentada y probada ofrece una solución completa para el desplazamiento horizontal, además de eventos personalizados, estilos condicionales y soporte para marcos front-end populares como React, Vue y Angular, así como constructores de sitios como Elementor o Gutenberg.

Descubre cómo mejorar la experiencia de desplazamiento con CSS Snap Scroll Horizontal en . ¡Eleva tu sitio web al siguiente nivel!