A partir de Chrome 81, ya no es necesario agregar objetos de escucha de eventos para forzar el ajuste.
Ajuste de desplazamiento de CSS permite a los desarrolladores web crear experiencias de desplazamiento bien controladas declarando posiciones de ajuste de desplazamiento. Una deficiencia de la implementación actual el ajuste de desplazamiento no funciona bien cuando cambia el diseño, por ejemplo, cuando la ventana de visualización está o se rote el dispositivo. Esta deficiencia se corrigió en Chrome 81.
Interoperabilidad
Muchos navegadores tienen compatibilidad básica con el Snap de desplazamiento de CSS. Consulta ¿Puedo usar CSS? Desplaza el botón para obtener más información.
Actualmente, Chrome es el único navegador que implementa el ajuste de desplazamiento después del diseño.
cambios. Firefox tiene un
entrada abierta para
para implementar esto, y Safari también tiene
ticket para volver a ajustar después de un
el contenido de la barra de desplazamiento. Por ahora, puedes simular este comportamiento agregando
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 vuelva a la misma configuración.
.
Información general
Ajuste de desplazamiento de CSS
La función Ajuste de desplazamiento de CSS permite a los desarrolladores web crear experiencias de desplazamiento declarando las posiciones de ajuste de desplazamiento. Estos puestos garantizar que el contenido desplazable esté alineado correctamente con su contenedor para superar los problemas del desplazamiento impreciso. En otras palabras, el ajuste de desplazamiento:
- Impide las posiciones de desplazamiento incómodas durante el desplazamiento.
- Crea el efecto de paginación a través del contenido.
Los artículos paginados y los carruseles de imágenes son dos casos de uso comunes del desplazamiento tomas.
Limitaciones
El ajuste del desplazamiento permite a los usuarios navegar sin esfuerzo por el contenido, pero su la incapacidad para adaptarse a los cambios en el contenido y el diseño bloquea parte de su potencial y muchos beneficios más. Como se muestra en el ejemplo de arriba, los usuarios deben reajustar las posiciones de desplazamiento cada vez que cambien el tamaño de una ventana para encuentra el elemento ajustado previamente. Algunas situaciones comunes que causan el diseño cambio:
- Cambia el tamaño de una ventana
- Cómo rotar un dispositivo
- Abrir Herramientas para desarrolladores
Las primeras dos situaciones hacen que el Ajuste de desplazamiento de CSS sea menos atractivo para los usuarios y la y la tercera es una pesadilla para los desarrolladores cuando depuran. Los desarrolladores también deben ten en cuenta estas deficiencias al tratar de hacer una experiencia dinámica que admite 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 mediante JavaScript para forzar la ejecución del ajuste cuando cualquiera de los diseños mencionados de que ocurran cambios. Esta solución puede ser ineficaz cuando el usuario espera que para volver al mismo contenido de antes. Cualquier otro manejo con Al parecer, JavaScript casi anula el objetivo de esta función de CSS.
Compatibilidad integrada para volver a ajustar después de los cambios de diseño en Chrome 81
Las deficiencias mencionadas ya no existen en Chrome 81: los desplazadores permanecerán aún después de cambiar el diseño. Volverán a evaluar las posiciones de desplazamiento después de cambia su diseño y vuelve a ajustarlo a la posición de ajuste más cercana si es necesario. Si la barra de desplazamiento se ajustó previamente a un elemento que aún existe después de que cambio de diseño, la barra de desplazamiento intentará volver a ajustarlo. Presta atención a ¿qué sucede cuando el diseño cambia en los siguientes ejemplo.
NOPE y cambiar la orientación del dispositivo
de vertical a horizontal, se muestra una pantalla en blanco, lo que indica que el
se perdió la posición del ajuste de desplazamiento.
NOPE permanece a la vista aunque la orientación del dispositivo cambie varias veces.
Consulta la sección Cómo volver a ajustar después de cambios de diseño especificación para obtener más 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 demostración de chat. IU para elementos visuales.
Trabajo futuro
Por el momento, todos los efectos de desplazamiento que se vuelven a ajustar son instantáneos. un posible seguimiento es para admitir el reajuste con un desplazamiento fluido . Consulta el problema de especificaciones. para conocer los detalles.
Comentarios
Tus comentarios son invaluables para que puedas volver a ajustar tus fotos luego de un cambio de diseño, así que sigue adelante. pruébala y deja que los ingenieros de Chromium sabrás lo que piensa.