La overflow-anchorpropiedad nos permite optar por no participar en Scroll Anchoring, que es una función del navegador destinada a permitir que el contenido se cargue por encima de la ubicación DOM actual del usuario sin cambiar la ubicación del usuario una vez que el contenido se haya cargado por completo.
Por qué lo necesitamos
Scroll Anchoring es una función del navegador que intenta evitar una situación común en la que puede desplazarse hacia abajo en una página web antes de que el DOM se haya cargado por completo y, cuando lo hace, cualquier elemento que se cargue por encima de su ubicación actual lo empuja hacia abajo en la página.
Tiene sentido por qué sucedería esto. Hay propiedades CSS que aplicamos a elementos que les dan tamaño (por ejemplo width), forma (por ejemplo transform) y posición (por ejemplo margin). Si esos elementos no se han cargado en el momento en que nos hayamos desplazado hacia abajo en la página, el DOM continuará cargándolos aunque estén fuera de nuestra ventana actual y se expandirá físicamente para dejar espacio para esos elementos recién cargados. A medida que el DOM crece, nuestra posición en la página cambia para adaptarse a esos elementos.
Scroll Anchoring evita esa experiencia de "salto" al bloquear la posición del usuario en la página mientras se realizan cambios en el DOM por encima de la ubicación actual. Esto permite que el usuario permanezca anclado donde se encuentra en la página incluso cuando se cargan nuevos elementos en el DOM.
La overflow-anchorpropiedad nos permite excluirnos de la función Scroll Anchoring en caso de que se prefiera permitir que el contenido vuelva a fluir a medida que se cargan los elementos.
Sintaxis
article ( overflow-anchor: (auto | none ); )Valores
La overflow-anchorpropiedad acepta dos valores que esencialmente alternan si la función está habilitada o no.
auto(predeterminado): habilita el anclaje de desplazamiento en la parte de la página o elemento en el que se aplica.none: Deshabilita el anclaje de desplazamiento en parte o en toda una página web, o excluye partes del DOM del anclaje, lo que permite que el contenido vuelva a fluir.
Probablemente aplicaría esto al body, pero puede aplicarlo a cualquier selector, y tendrá efecto si ese elemento se desplaza.
Manifestación
En esta demostración, tan pronto como se desplace en uno de los cuadros, agregará un montón de cuadros verdes en la parte superior de ese div. Normalmente, eso reduciría el contenido de inmediato, lo que podría ser una gran distracción y perder su lugar en el texto. Con overflow-anchor: auto;, se conserva el lugar de desplazamiento. overflow-anchor: none;permite que los divs recién insertados afecten la posición de desplazamiento.
Vea el anclaje de desbordamiento de Pen de Chris Coyier (@chriscoyier) en CodePen.
Otra cosa que se puede hacer que puede ser muy útil es fijar la posición de desplazamiento de un elemento en la parte inferior. Entonces, por ejemplo, una aplicación de chat donde los mensajes nuevos se agregan al DOM en la parte inferior y desea que la posición de desplazamiento permanezca en la parte inferior mostrando todos los mensajes nuevos:
Vea el
desplazamiento de Pen "Stay at the bottom" con scroll-anchor de Chris Coyier (@chriscoyier)
en CodePen.
Soporte del navegador
En el momento de redactar este documento, overflow-anchorno es un estándar W3C actual, aunque el informe preliminar de la especificación propuesta está disponible para su lectura y Chrome lo ha adoptado desde la versión 56. Mozilla está considerando una función similar en Firefox. A medida que más navegadores adopten la función de anclaje de desplazamiento, es posible que esperemos ver más compatibilidad con el navegador, overflow-anchorya que brinda un control explícito para excluirse de la función.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 56 | 66 | No | 79 | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | No |
Más información
- Anclaje de desplazamiento: borrador propuesto de la especificación de anclaje de desplazamiento
- Blog de Chromium: la publicación de blog que anuncia la inclusión de Chrome de Scroll Anchoring y la propiedad CSS en la versión 56
- Ticket Bugzilla # 43114: Ticket abierto para incluir la propiedad en Firefox