Si hay algo que la gente realmente quiere del desplazamiento, es que sea fluido. Históricamente, Chrome ha tenido un desplazamiento fluido en algunos lugares, por ejemplo, cuando los usuarios se desplazan con sus paneles táctiles o desplazan una página en dispositivos móviles. Pero si el usuario tuviera un mouse enchufado, tendría un comportamiento de desplazamiento "escalonado" más inestable, lo que sería mucho menos agradable en términos estéticos. Todo eso está por cambiar en Chrome 49.
La solución al comportamiento de desplazamiento nativo basado en entradas escalonada para muchos desarrolladores. Se trata de usar bibliotecas, cuyo objetivo era reasignarlo a algo más suave y agradable para la vista. Los usuarios también hacen esto mediante extensiones. Sin embargo, ambas bibliotecas y extensiones tienen desventajas que cambian el desplazamiento:
- Un sentimiento de valle asombroso. Esto se manifiesta de dos maneras: en primer lugar, un sitio puede tener un comportamiento de desplazamiento fluido, pero otro puede no, por lo que el usuario puede terminar sintiéndose desorientado por la incoherencia. En segundo lugar, la física de fluidez de la biblioteca no necesariamente coincidirá con las de la plataforma. Por eso, si bien el movimiento puede ser fluido, puede sentirse mal o extraño.
- Mayor propensión a la contención y bloqueos de subprocesos principales. Como ocurre con cualquier JavaScript que se agregue a la página, la carga de CPU aumentará. Eso no es necesariamente un desastre, dependiendo de lo que esté haciendo la página, pero si hay algún trabajo de larga duración en el subproceso principal y se acopla el desplazamiento a este, el resultado neto puede ser inestabilidades de desplazamiento y bloqueos.
- Más mantenimiento para los desarrolladores, más código para que los usuarios descarguen. Tener una biblioteca para realizar un desplazamiento fluido va a ser algo que se debe mantener actualizada y mantenida, y aumentará el peso general de la página del sitio.
A menudo, estas desventajas también se aplican a muchas bibliotecas que se ocupan de los comportamientos de desplazamiento, ya sean efectos de paralaje u otras animaciones vinculadas con desplazamiento. Con frecuencia, activan bloqueos, obstaculizan la accesibilidad y, en general, dañan la experiencia del usuario. El desplazamiento es una interacción central de la Web, y se debe hacer con mucho cuidado cuando se altera con bibliotecas.
En Chrome 49, el comportamiento de desplazamiento predeterminado cambiará a Windows, Linux y ChromeOS. El antiguo comportamiento de desplazamiento escalonado dejará de estar disponible, y el desplazamiento será fluido de forma predeterminada. No es necesario realizar cambios en tu código, excepto quitar las bibliotecas de desplazamiento suave si las usaste.
Más accesorios para desplazar
Hay otros accesorios relacionados con los desplazamientos en las obras que también vale la pena mencionar. Muchos de nosotros queremos efectos vinculados al desplazamiento, como el paralaje y el desplazamiento fluido en un fragmento de documento (como example.com/#somesection). Como mencioné antes, los enfoques que se utilizan actualmente pueden ser perjudiciales tanto para los desarrolladores como para los usuarios. Hay dos estándares de plataforma en los que se está trabajando que podrían ayudar: Worklets de compositor y la propiedad scroll-behavior de CSS.
Houdini
Los Worklets del compositor forman parte de Houdini y aún no se han especificado e implementado por completo. Dicho esto, a medida que llegan los parches, te permitirán escribir JavaScript que se ejecuta como parte de la canalización del compositor, lo que, en general, significa que los efectos vinculados al desplazamiento, como el 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, donde los eventos de desplazamiento solo se envían periódicamente al subproceso principal (y pueden bloquearse por otro trabajo de subproceso principal), esto representaría un gran avance. Si te interesan los Worklets del compositor o alguna de las otras funciones nuevas y emocionantes que ofrece Houdini, consulta la publicación de Introducción a Houdini de Surma y las especificaciones de Houdini, y aporta tu opinión a la lista de distribución de Houdini.
comportamiento-de-desplazamiento
Cuando se trata del desplazamiento basado en fragmentos, la propiedad scroll-behavior de CSS es otra opción que podría servirte. Si quieres probarla, te alegrará saber que ya se envió en Firefox. Puedes habilitarla en Chrome Canary con la marca "Habilitar funciones experimentales de plataforma web". Si configuras, por ejemplo, el elemento <body> en scroll-behavior: smooth, todos los desplazamientos que se activen con cambios de fragmentos o por window.scrollTo se animarán de forma fluida. Eso es mucho mejor que usar y mantener código de una biblioteca que intente hacer lo mismo. Con algo tan fundamental como el desplazamiento, es realmente importante evitar superar las expectativas de los usuarios. Por ello, aunque estas funciones están en constante cambio, vale la pena adoptar un enfoque de mejora progresiva y quitar todas las bibliotecas que intenten completar estos comportamientos.
Avanza y desplázate
A partir de Chrome 49, el desplazamiento es más fluido. Pero eso no es todo: existen más posibles mejoras a través de Houdini y las propiedades de CSS, como smooth-scroll. Prueba Chrome 49, danos tu opinión y, sobre todo, deja que el navegador se desplace donde puedas.