Si hay algo que las personas realmente quieren del desplazamiento, es que sea fluido. Históricamente, Chrome tuvo un desplazamiento fluido en algunos lugares, por ejemplo, cuando los usuarios se desplazan con el panel táctil o deslizan una página en dispositivos móviles. Sin embargo, si el usuario tiene un mouse conectado, obtendrá un comportamiento de desplazamiento más inestable y “en pasos”, que es mucho menos atractivo desde el punto de vista estético. Todo eso cambiará en Chrome 49.
La solución para el comportamiento de desplazamiento nativo por pasos impulsado por entradas para muchos desarrolladores fue usar bibliotecas, cuyo objetivo es reasignarlo a algo más fluido y agradable a la vista. Los usuarios también lo hacen a través de extensiones. Sin embargo, las bibliotecas y las extensiones que cambian el desplazamiento tienen desventajas:
- Un efecto de valle inquietante. Esto se manifiesta de dos maneras: en primer lugar, un sitio puede tener un comportamiento de desplazamiento fluido, pero otro no, por lo que el usuario puede terminar sintiéndose desorientado por la incoherencia. En segundo lugar, la física de la biblioteca no coincidirá necesariamente con la de la plataforma. Por lo tanto, si bien el movimiento puede ser fluido, puede sentirse incorrecto o extraño.
- Mayor propensión a la contención y el bloqueo del subproceso principal. Al igual que con cualquier JavaScript que se agregue a la página, se aumentará la carga de la CPU. Eso no es necesariamente un desastre, según lo que esté haciendo la página, pero si hay algún trabajo de larga duración en el subproceso principal y el desplazamiento se vinculó a él, el resultado neto puede ser un desplazamiento entrecortado y un bloqueo.
- Más mantenimiento para los desarrolladores y más código para que descarguen los usuarios. Tener una biblioteca para realizar un desplazamiento fluido es algo que se debe mantener y actualizar, y aumentará el peso general de la página del sitio.
Estas desventajas también suelen ser válidas para muchas bibliotecas que se ocupan de los comportamientos de desplazamiento, ya sean efectos de paralaje o alguna otra animación acoplada al desplazamiento. Con demasiada frecuencia, activan la inestabilidad, dificultan la accesibilidad y, en general, dañan la experiencia del usuario. El desplazamiento es una interacción fundamental de la Web, y alterarlo con bibliotecas debe hacerse con mucho cuidado.
En Chrome 49, el comportamiento de desplazamiento predeterminado cambiará en Windows, Linux y ChromeOS. El comportamiento de desplazamiento por pasos anterior desaparecerá, y el desplazamiento será fluido de forma predeterminada. No es necesario realizar cambios en el código, excepto tal vez quitar las bibliotecas de desplazamiento suave si las usaste.
Más funciones de desplazamiento
Hay otros elementos relacionados con el desplazamiento en proceso que también vale la pena mencionar. Muchos de nosotros queremos efectos acoplados al desplazamiento, como la paralaje, el desplazamiento suave a un fragmento de documento (como example.com/#somesection). Como mencioné antes, los enfoques que se usan hoy en día pueden ser perjudiciales tanto para los desarrolladores como para los usuarios. Hay dos estándares de la plataforma en los que se está trabajando que podrían ser útiles: las worklets del compositor y la propiedad CSS scroll-behavior.
Houdini
Las worklets de compositor forman parte de Houdini y aún no se especifican ni se implementan por completo. Dicho esto, a medida que se implementen los parches, te permitirán escribir JavaScript que se ejecute como parte de la canalización del compositor, lo que, en general, significa que los efectos acoplados al desplazamiento, como la paralaje, se mantendrán perfectamente sincronizados con la posición de desplazamiento actual. Dada la forma en que se maneja el desplazamiento en la actualidad, en la que los eventos de desplazamiento solo se envían periódicamente al subproceso principal (y pueden ser bloqueados por otro trabajo del subproceso principal), esto representaría un gran avance. Si te interesan las worklets de Compositor o alguna de las otras funciones nuevas y emocionantes que ofrece Houdini, consulta la entrada de introducción a Houdini de Surma, las especificaciones de Houdini y comparte tus comentarios en la lista de distribución de Houdini.
scroll-behavior
En el caso del desplazamiento basado en fragmentos, la propiedad CSS scroll-behavior es otra opción que podría ayudarte. Si quieres probarla, te complacerá saber que ya se envió a Firefox y que puedes habilitarla en Chrome Canary con la marca "Habilitar funciones experimentales de la plataforma web". Si configuras, por ejemplo, el elemento <body> en scroll-behavior: smooth, todos los desplazamientos que se activen por cambios de fragmento o por window.scrollTo se animarán sin problemas. Eso es mucho mejor que tener que usar y mantener el código de una biblioteca que intenta hacer lo mismo. Con algo tan fundamental como el desplazamiento, es muy importante evitar defraudar las expectativas de los usuarios. Por lo tanto, mientras estas funciones estén en constante cambio, vale la pena adoptar un enfoque de mejora progresiva y quitar las bibliotecas que intenten realizar un polyfill de estos comportamientos.
Desplázate
A partir de Chrome 49, el desplazamiento es más fluido. Pero eso no es todo: hay más mejoras potenciales que podrían implementarse a través de Houdini y propiedades CSS como smooth-scroll. Prueba Chrome 49, danos tu opinión y, sobre todo, deja que el navegador realice el desplazamiento cuando puedas.