Como desarrolladores front-end, a menudo nos emocionamos con algunas cosas bastante específicas.
Tome el desplazamiento, por ejemplo. ¿Recuerdas cuando apareció la inercia de desplazamiento? Estaríamos emocionados hojeando sitios web gritando “¡Mira! ¡Tiene impulso! ¡Tiene impulso!” Y la gente nos mira como:
Bueno, CSS scroll snap es la última innovación en el fascinante mundo del desplazamiento de sitios web. La siguiente etapa en su arco de personajes, por así decirlo.
A diferencia de la inercia de desplazamiento, que afloja el movimiento de desplazamiento, CSS scroll snap lo controla. Agrega más control sobre dónde y cómo se mueve el puerto de desplazamiento, obligándolo a “encajar” en su lugar en las posiciones que especifique (por cierto, el puerto de desplazamiento es solo el elemento con la barra de desplazamiento, ya sea la ventana como un todo o un elemento dentro de ella).
Es INCREÍBLE, hay tantas cosas que puedes hacer con él. Pero dicho esto, no es una panacea. Hay algunos casos de uso en los que no es la herramienta ideal para el trabajo, algunos en los que no puede hacer el trabajo solo (y necesitará CSS/JS adicional) y algunos casos en los que es mejor evitarlo. Aquí hay algunas situaciones de este tipo…
Si está utilizando bibliotecas de terceros para generar animaciones basadas en la posición de desplazamiento, es posible que dejen de funcionar. Esto también se aplica a los CMS o creadores de sitios web, como Webflow, Elementor, Wix, etc.
Todo depende de cómo implemente las instantáneas de desplazamiento de CSS y cuáles son sus restricciones.
La raíz del problema es que, al usar CSS Snaps en pantalla completa y aplicarlo en cualquier elemento ese no es el elemento htmlla posición desplazada ya no está disponible en ninguna de las siguientes propiedades (como esperan la mayoría de las bibliotecas basadas en desplazamiento):
- documento.documentElement.scrollTop
- ventana.pageYOffset
- document.documentElement.clientTop
En cambio, el valor de la posición de desplazamiento ahora estará en document.body.scrollTop.
Esto se debe a que el elemento de desplazamiento ya no es la ventana o el elemento del documento, sino el contenedor que eligió para el desplazamiento rápido. Puede ser el propio cuerpo o cualquier otro envoltorio alrededor de tus secciones.
Además de eso, el detector de eventos en el objeto de la ventana ya no captará el evento de desplazamiento:
window.addEventListener('scroll', onScroll);
document.body.addEventListener('scroll', onScroll);
document.querySelector('.my-wrapper')
.addEventListener('scroll', onScroll);
Esto puede ser un poco complicado y podría generar conflictos inesperados con bibliotecas externas, creadores de sitios web o incluso con su propio código.
Aquí hay un codepen que ilustra el problema. Tenga en cuenta que no recibirá ningún mensaje en la consola JS:
CSS scroll snap es una modificación del comportamiento de desplazamiento normal del navegador, eso es todo. Esto significa que no puede, de manera predeterminada, desplazarse por el contenido haciendo clic y arrastrando con el mouse.
Si se desplaza con la barra de desplazamiento, la rueda del mouse o haciendo clic dentro del elemento y usando las teclas de dirección, funciona bien. Sin embargo, si intenta hacer clic y arrastrar con el mouse, no activará el desplazamiento, solo seleccionará el texto u otros elementos cercanos como de costumbre.
Pruébalo a continuación y verás. Para su disfrute, he escrito el contenido de estas diapositivas en formato Haiku:
Entonces, ¿por qué deberías preocuparte por esto? Bueno, una parte clave de la usabilidad es hacer que tu sitio funcione de la forma en que la gente espera que funcione. “No me hagas pensar”, como diría Steve Krug.
Y debido a que todos estamos tan acostumbrados a los dispositivos con pantalla táctil en estos días, es natural que las personas intenten replicar ese tipo de interacción cuando usan una computadora de escritorio o portátil normal.
Eso significa que, si tiene un control deslizante, puede estar seguro de que algunas personas intentarán hacer clic y arrastrarlo. Entonces, si su control deslizante no es compatible con esto, es posible que no proporcione la experiencia de usuario óptima para esos usuarios.
Problemas al usar CSS scroll snap cuando su contenido es más grande que el puerto de desplazamiento
Podrías pensar “Ahh, ¿no sería genial agregar un ajuste de desplazamiento a diferentes secciones de una página… tal vez los encabezados de un artículo?”.
Me gusta su idea: de esa manera, las personas pueden desplazarse y pasar directamente a la siguiente sección del contenido. ¿No sería eso conveniente?
Tal vez no… si sus secciones son más grandes que el puerto de desplazamiento, sus usuarios tendrán problemas para ver todo su contenido. Por ejemplo, tome una configuración como esta:
.scrollport {
padding: 20px;
height: 500px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scrollport h2 {
scroll-snap-align: start;
padding-top: 10px;
}
Aquí tenemos una altura de puerto de desplazamiento de 500 px, y nos ajustamos a cualquier elemento h2 dentro del puerto de desplazamiento. Pero si el contenido debajo de ese h2 tiene más de 500 px, terminaremos con esto:
Si se desplaza un poco hacia abajo para leer el contenido, el navegador lo llevará al siguiente h2 en el elemento de puerto de desplazamiento. (tenga en cuenta que el texto de relleno aquí proviene de JeffSum.com. Es como Lorem Ipsum pero con citas de Jeff Goldblum, y por lo tanto mucho más genial).
Una cosa que puede hacer aquí es establecer el tipo de estilo de desplazamiento en proximidad en lugar de obligatorio:
.scrollport {
padding: 20px;
height: 500px;
overflow-y: scroll;
scroll-snap-type: y proximity;
}Cuando usamos obligatorio, el navegador siempre se ajustará al siguiente elemento cuando comience a desplazarse (como en el ejemplo anterior). Con la proximidad, solo se ajustará a un elemento si está cerca de él, así:
En este caso, debido a que scroll-snap-align está configurado para comenzar, el navegador se ajustará a un h2 si la parte superior del puerto de desplazamiento está cerca de él. Desafortunadamente, en este momento no podemos controlar exactamente qué tan cerca debe estar para que se rompa, eso lo determina el navegador.
Ajustar a secciones que no sean de pantalla completa causará problemas
El ajuste de desplazamiento de CSS puede ser el truco cuando se trabaja con secciones de pantalla completa. Sin embargo, cuando desee trabajar con secciones que no sean de pantalla completa, encontrará algunos problemas obvios.
Es posible que no pueda ajustarse a la sección que desea y sentirá que ha perdido el control sobre el desplazamiento de la página.
Aquí demuestro cómo quiero pasar a la sección 2 cuando me desplazo hacia abajo y vuelve a la sección 1 a menos que la sección 2 esté por encima de la mitad de la pantalla.
Además, cuando me coloco en la sección 3, es literalmente imposible pasar a la sección 2.
Su navegador no soporta la etiqueta de vídeo.
Puedes probarlo tú mismo en el siguiente Codepen:
Una cosa que no funciona del todo con el complemento de desplazamiento es un desplazamiento de bucle infinito (¿o debería ser un bucle de desplazamiento infinito?). Esto se debe a que los elementos dentro del puerto de desplazamiento se colocan uno al lado del otro; no se repiten de forma predeterminada.
Entonces, ¿qué sucede cuando llega al último elemento y luego intenta seguir desplazándose hacia adelante?
Bueno, fuera de la caja, nada. Ha llegado al final del contenido y no puede desplazarse más. La mayoría de los controles deslizantes llegan a un compromiso aquí: con un poco de CSS elegante y botones de navegación, puede configurar el control deslizante para que un clic en la navegación hacia adelante cuando esté en la última diapositiva lo lleve de regreso al principio:
Esto está bien, y muchos sitios lo hacen. ¡Pero no obtienes ese genial efecto de bucle infinito!
Por lo tanto, deberá usar JavaScript para esto; por ejemplo, así es como se ve en fullPage.js. Tenga en cuenta cómo puede llegar a la tercera y última diapositiva, pero luego siga desplazándose. Terminas de nuevo en la primera diapositiva, pero en lugar de volver al principio, tienes la impresión de un desplazamiento continuo. No sé ustedes, pero creo que eso es muy bueno.
En cuanto a hoy, el ajuste de desplazamiento de css no funciona como cabría esperar cuando se usa la rueda del mouse en Chrome.
Los usuarios pueden experimentar la omisión de bloques cuando finaliza el desplazamiento y pueden terminar molestando bastante a los visitantes.
Esto tiene sido reportado múltiple veces en stackoverflow y parece ser un error de Chrome.
Scroll Snap es solo un módulo CSS, tiene un trabajo: mover el puerto de desplazamiento a una posición específica. No es un marco de canto y baile que puede hacer varias cosas.
Si planea hacer algo más complejo como un control deslizante o un sitio de página completa, ¡eso es genial! Solo date cuenta de que el ajuste de desplazamiento es una pieza de ese rompecabezas. Si desea agregar otras funciones tradicionales como botones de navegación o migas de pan, deberá combinarlo con otro CSS y/o JavaScript.
Una gran ventaja de las instantáneas de CSS es que hace algo que antes teníamos que hacer con JavaScript. Si puede hacer algo en CSS en lugar de JS, generalmente debería hacerlo, de modo que los visitantes con JS desactivado aún puedan usar el sitio normalmente.
Entonces, si quisiera hacer algo como un control deslizante con CSS puro, eso es posible, hasta cierto punto. Pero estás algo limitado en lo que puedes hacer con CSS puro. En muchos casos, es probable que también deba agregar algo de JS para que su sitio haga exactamente lo que desea.
Es como comparar manzanas con naranjas.
fullPage.js es una biblioteca de JavaScript que viene con una amplia gama de opciones, métodos y devoluciones de llamada configurables.
Scroll Snaps es una característica única de CSS para lograr un comportamiento de desplazamiento muy específico.
Tienen una sola cosa en común. Proporcionan un efecto de desplazamiento similar. Aparte de eso, Scroll Snaps no proporciona ninguna otra característica adicional, mientras que fullPage.js proporciona una tonelada.
Entonces, ¿qué significa esto para usted como desarrollador web?
Significa que fullPage.js viene con un conjunto de herramientas que pueden salvarte mucho de tiempo durante el desarrollo de una página. Cosas como viñetas de navegación, habilitar/deshabilitar el desplazamiento según las condiciones que necesite, opciones de respuesta, control sobre el desplazamiento del teclado, activación de acciones en diferentes estados del movimiento, secciones desplazables, etc.
No me malinterpreten aquí: el ajuste de desplazamiento es increíble y trae a CSS algo que anteriormente solo podíamos hacer con JS. Solo quería contarles un poco más sobre lo que puede y no puede hacer. Si está buscando hacer algo un poco más complejo, deberá agregar mucho más CSS y probablemente JS para obtener el efecto que desea.
Y si lo que tiene en mente es un sitio de página completa que encaje bien en las diferentes secciones, ¿por qué reinventar la rueda? ¡Vea fullPage.js en su lugar! ¿Por qué? Bueno porque…
- Resuelve todos los problemas discutidos aquí, y muchos más.
- Le ahorrará MUCHO tiempo: puede tomarse el tiempo que hubiera dedicado a codificar su propia solución y hacer otras cosas en su lugar.
- Es realmente fácil de configurar y altamente personalizable.
- Proporciona decenas de funciones que pronto empezará a extrañar si comienza a crear un sitio con instantáneas de desplazamiento CSS. (Devoluciones de llamada, clases de estado CSS, opciones de respuesta, hash de URL, métodos, secciones desplazables, etc.)
Básicamente es una solución lista para usar que funciona lista para usar para sitios de página completa. ¡Échale un vistazo!
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
