Summary

  • Al tocar el borde de una zona desplazable, el navegador puede entregar el movimiento sobrante a un contenedor superior. Por eso una ventana de chat inmóvil consigue mover el artículo entero.
  • contain corta esa entrega y puede conservar la señal visual del borde; none corta ambas cosas. La distinción permitió que el sitio fijara un límite sin gobernar cada movimiento mediante eventos de JavaScript.

El último mensaje del chat queda quieto. El dedo todavía baja y el cuerpo de la página se mueve bajo la ventana, como si alguien hubiera cambiado de cinta transportadora sin avisar. El borrador público de 2019 del W3C llama a esto encadenamiento del desplazamiento: el gesto empieza en un contenedor, llega a su límite y puede continuar en un antepasado. No hay misterio en el motor; el misterio es por qué esa transferencia parece una buena idea para la persona que intenta leer una conversación.

Durante años, una salida práctica fue vigilar los eventos de rueda y toque. Cerca del borde, el sitio llamaba a preventDefault(). El documento del W3C enumera los problemas: un controlador no pasivo obliga al navegador a esperar la respuesta del script y puede añadir latencia; cancelar el evento puede impedir también el avance normal hasta el límite. Además, el navegador quizá quiera mostrar un pequeño rebote o brillo dentro del chat. Ese gesto local explica que se acabó la lista. El sitio quería detener el viaje de la página, no quitarle al chat su forma de decir «hasta aquí».

En las actas del 21 de diciembre de 2016, el CSS Working Group discutió la cuestión con otro nombre: scroll-boundary-behavior, descendiente de una idea de Microsoft. Tab Atkins planteó la pregunta sin adornos: cuando un área llega arriba o abajo, ¿sale de ella la intención de desplazarse? Simon Fraser recordó que algunos navegadores fijan un área durante un mismo gesto y advirtió del riesgo de encerrar al usuario. Un widget de chat al final de su contenido apareció como caso concreto. Hubo apoyo para definir el comportamiento, pero todavía no una resolución completa. Hasta el nombre necesitaba trabajo.

El proyecto maduró en WICG y, en enero de 2018, Majid Valipour pidió trasladar overscroll-behavior a los borradores del grupo CSS. Su propuesta registra el avance de navegadores de aquel momento. El paso interesante es institucional y técnico a la vez: el límite de una ventana deja de ser un truco privado y pasa a discutirse como una instrucción común para distintos motores.

El historial oficial del W3C fija el primer borrador público en el 6 de junio de 2019. Allí la frontera tiene dos lados. Una sacudida visual dentro del chat es una acción local. Entregar el gesto a la página o activar navegación es una acción no local. auto permite el comportamiento habitual; contain prohíbe la acción no local y conserva la posibilidad de una respuesta local; none apaga también esta última. Para un chat, la pequeña sacudida puede ser útil. Una lista infinita que carga nuevos elementos quizá prefiera callar por completo en el borde. La elección cambia la experiencia del lector, no solo una casilla de configuración.

También importa hacia dónde se desplaza el texto. Los ejes x e y son físicos, mientras que un diseño puede organizarse por flujo de bloque y de línea. En la reunión de Berlín de abril de 2018, el grupo resolvió añadir las variantes block e inline. Así, una regla sobre el límite puede seguir la dirección lógica de la escritura. Un sitio con lectores en varias lenguas no debería tener que fingir que todas las páginas se leen en la misma dirección.

El borrador pone sobre la mesa una barra lateral fija, un refresco al tirar de la página y una lista que crece sin fin. Cada uno necesita una frontera distinta. El mérito de la propiedad es pequeño y palpable: llegas al último mensaje, el chat te lo hace saber, y el artículo no se marcha por las escaleras.