A partir de Chrome 81, ya no es necesario agregar detectores de eventos para forzar el reajuste.
Ajuste de desplazamiento CSS
permite a los desarrolladores web crear experiencias de desplazamiento bien controladas al declarar posiciones de ajuste de desplazamiento. Una deficiencia de la implementación actual es que el ajuste de desplazamiento no funciona bien cuando cambia el diseño, como cuando se cambia el tamaño de la ventana gráfica o se gira el dispositivo. Esta deficiencia se corrige en Chrome 81.
Interoperabilidad
Muchos navegadores tienen soporte básico para CSS Scroll Snap. Ver ¿Puedo usar CSS Scroll Snap? para más información.
Chrome es actualmente el único navegador que implementa el ajuste de desplazamiento después de los cambios de diseño. Firefox tiene un
boleto abierto para implementar esto y Safari también tiene un
boleto para volver a ajustar después de que cambie el contenido de un desplazador. Por ahora, puede simular este comportamiento agregando el siguiente código a los detectores de eventos para forzar la ejecución de un ajuste:
scroller.scrollBy(0,0);Sin embargo, esto no garantizará que el desplazador vuelva al mismo elemento.
Antecedentes
Ajuste de desplazamiento CSS
La función CSS Scroll Snap permite a los desarrolladores web crear experiencias de desplazamiento bien controladas declarando posiciones de ajuste de desplazamiento. Estas posiciones aseguran que el contenido desplazable esté correctamente alineado con su contenedor para superar los problemas de desplazamiento impreciso. En otras palabras, ajuste de desplazamiento:
- Evita posiciones de desplazamiento incómodas al desplazarse.
- Crea el efecto de paginar el contenido.
Los artículos paginados y los carruseles de imágenes son dos casos de uso comunes para las instantáneas de desplazamiento.
Defectos
Las posiciones de ajuste se pierden al cambiar el tamaño de una ventana.
El ajuste de desplazamiento permite a los usuarios navegar sin esfuerzo por el contenido, pero su incapacidad para adaptarse a los cambios en el contenido y el diseño bloquea algunos de sus beneficios potenciales. Como se muestra en la ejemplo
arriba, los usuarios tienen que reajustar las posiciones de desplazamiento cada vez que cambian el tamaño de una ventana para encontrar el elemento previamente ajustado. Algunos escenarios comunes que provocan cambios de diseño son:
- Cambiar el tamaño de una ventana
- Girar un dispositivo
- Abrir DevTools
Los dos primeros escenarios hacen que CSS Scroll Snap sea menos atractivo para los usuarios y el tercero es una pesadilla para los desarrolladores a la hora de depurar. Los desarrolladores también deben considerar estas deficiencias al intentar crear una experiencia dinámica que admita acciones como agregar, eliminar o mover contenido.
Una solución común para esto es agregar oyentes que ejecuten un desplazamiento programático a través de Javascript para forzar la ejecución del ajuste cada vez que ocurra alguno de estos cambios de diseño mencionados. Esta solución puede resultar ineficaz cuando el usuario espera que el desplazador vuelva al mismo contenido que antes. Cualquier manejo adicional con Javascript parece casi frustrar el propósito de esta función CSS.
Soporte nativo para volver a ajustar después de cambios de diseño en Chrome 81
Las deficiencias mencionadas ya no existen en Chrome 81: los desplazadores permanecerán ajustados incluso después de cambiar el diseño. Volverán a evaluar las posiciones de desplazamiento después de cambiar su diseño y volverán a ajustar a la posición de ajuste más cercana si es necesario. Si el desplazador se encajó previamente a un elemento que aún existe después del cambio de diseño, entonces el desplazador intentará volver a él. Preste atención a lo que sucede cuando el diseño cambia en lo siguiente
ejemplo.
Posición de ajuste perdida
Girar un dispositivo no conservar las posiciones de ajuste en Chrome 80. Después de desplazarse a la diapositiva que dice NOPE y cambiando la orientación del dispositivo de vertical a horizontal, se muestra una pantalla en blanco, lo que indica que se perdió la posición de ajuste de desplazamiento.
Posición de ajuste conservada
Girar un dispositivo hace conservar las posiciones de ajuste en Chrome 81. La diapositiva que dice NOPE permanece a la vista aunque la orientación del dispositivo cambie varias veces.
Ver el Volver a ajustar después de que el diseño cambie la especificación para más detalles.
Precaución: El ajuste también se ejecuta cuando se carga la página. Esto afecta el desplazamiento de desplazamiento inicial de los desplazadores que utilizan la función de ajuste de desplazamiento.
Con «Ajustar después de cambios de diseño», los desarrolladores pueden implementar barras de desplazamiento adhesivas con unas pocas líneas de CSS:
.container {
scroll-snap-type: y proximity;
}.container::after {
scroll-snap-align: end;
display: block;
}
¿Querer aprender más? Ver lo siguiente interfaz de usuario de chat de demostración para efectos visuales.
Agregar un nuevo mensaje desencadena un nuevo ajuste, lo que hace que se adhiera a la parte inferior en Chrome 81.
Trabajo futuro
Todos los efectos de desplazamiento de reajuste son actualmente instantáneos; un posible seguimiento es apoyar el re-ajuste con efectos de desplazamiento suave. Ver el problema de especificación
para detalles.
Realimentación
Sus comentarios son invaluables para mejorar el ajuste después de los cambios de diseño, así que continúe y pruébelo y informe a los ingenieros de Chromium qué piensas.
