A partir de Chrome 81, ya no es necesario agregar objetos de escucha de eventos para forzar la reajuste.
CSS Scroll Snap permite a los desarrolladores web crear experiencias de desplazamiento bien controladas mediante la declaración de 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 del viewport o se rota el dispositivo. Este problema se solucionó en Chrome 81.
Interoperabilidad
Muchos navegadores tienen compatibilidad básica con CSS Scroll Snap. Consulta ¿Puedo usar CSS Scroll Snap? para obtener más información.
Por el momento, Chrome es el único navegador que implementa el ajuste del desplazamiento después de los cambios en el diseño. Firefox tiene un entrada abierto para implementar esto, y Safari también tiene un ticket abierto para volver a ajustarlo después de que cambie el contenido de un usuario de desplazamiento. Por ahora, puedes simular este comportamiento si agregas el siguiente código a los objetos de escucha de eventos para forzar la ejecución de un ajuste:
javascript
scroller.scrollBy(0,0);
Sin embargo, esto no garantizará que la barra de desplazamiento se recupere al mismo elemento.
Información general
Ajustes de desplazamiento de 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 garantizan que el contenido desplazable esté alineado correctamente con su contenedor para solucionar los problemas de desplazamiento impreciso. En otras palabras, ajuste de desplazamiento:
- Impide posiciones de desplazamiento incómodas al desplazarse.
- Crea el efecto de la paginación a través del contenido.
Los artículos paginados y los carruseles de imágenes son dos casos de uso comunes para las tomas de desplazamiento.
Limitaciones
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 posibles beneficios. Como se muestra en el ejemplo anterior, los usuarios deben volver a ajustar las posiciones de desplazamiento cada vez que cambian el tamaño de una ventana para encontrar el elemento ajustado anteriormente. Estos son algunos casos comunes que causan cambios en el diseño:
- Cómo cambiar el tamaño de una ventana
- Rotar un dispositivo
- Cómo abrir Herramientas para desarrolladores
Las primeras dos situaciones hacen que CSS Scroll Snap sea menos atractivo para los usuarios, y la tercera es una pesadilla para los desarrolladores durante la depuración. Los desarrolladores también deben tener en cuenta estas deficiencias cuando intentan crear una experiencia dinámica que admita acciones como agregar, quitar o mover contenido.
Una solución común para esto es agregar objetos de escucha que ejecuten un desplazamiento programático a través de JavaScript para forzar la ejecución del ajuste cada vez que se produzca alguno de estos cambios de diseño. Esta solución alternativa puede no ser eficaz cuando el usuario espera que el desplazamiento vuelva al mismo contenido que antes. Cualquier otro control con JavaScript parece casi frustrar el propósito de esta función de CSS.
Compatibilidad integrada 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. Después de cambiar su diseño, volverán a evaluar las posiciones de desplazamiento y, si es necesario, volverán a ajustar a la posición más cercana. Si la barra de desplazamiento se ajustó anteriormente a un elemento que aún existe después del cambio de diseño, la barra de desplazamiento intentará volver a él. Presta atención a lo que sucede cuando cambia el diseño en el siguiente ejemplo.
NOPE y cambiar la orientación del dispositivo de vertical a horizontal, se muestra una pantalla en blanco, lo que indica que se perdió la posición del ajuste de desplazamiento.
NOPE permanece visible aunque la orientación del dispositivo cambie varias veces.
Consulta la especificación de Reajuste después de cambios de diseño para obtener más detalles.
Ejemplo: Barras de desplazamiento fijas
Con la opción "Ajustar después de los cambios de diseño", los desarrolladores pueden implementar barras de desplazamiento fijas con algunas líneas de CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
¿Quieres obtener más información? Consulta la siguiente IU de chat de demostración para imágenes.
Trabajo futuro
Todos los efectos de desplazamiento de reajuste son instantáneos. Un posible seguimiento es admitir la reajuste con efectos de desplazamiento suave. Consulta el problema de especificación para obtener más información.
Comentarios
Tus comentarios son invaluables para mejorar los ajustes después de los cambios de diseño, así que pruébalo y permite que los ingenieros de Chromium sepan lo que piensas.