La overflow-anchorpropriété nous permet de désactiver l'ancrage de défilement, qui est une fonctionnalité de navigateur destinée à permettre au contenu de se charger au-dessus de l'emplacement DOM actuel de l'utilisateur sans changer l'emplacement de l'utilisateur une fois que ce contenu a été entièrement chargé.
Pourquoi nous en avons besoin
L'ancrage de défilement est une fonctionnalité de navigateur qui tente d'éviter une situation courante dans laquelle vous pouvez faire défiler une page Web avant que le DOM ne soit complètement chargé et, lorsque c'est le cas, tous les éléments qui se chargent au-dessus de votre emplacement actuel vous poussent plus bas dans la page.
Il est logique que cela se produise. Il existe des propriétés CSS que nous appliquons aux éléments qui leur donnent la taille (par exemple width), la forme (par exemple transform) et la position (par exemple margin). Si ces éléments ne sont pas chargés au moment où nous avons fait défiler la page, le DOM continuera à les charger même s'ils sont en dehors de notre fenêtre actuelle et s'étendra physiquement pour faire de la place pour ces éléments fraîchement chargés. Au fur et à mesure que le DOM se développe, notre position sur la page change pour s'adapter à ces éléments.
L'ancrage de défilement empêche cette expérience de «saut» en verrouillant la position de l'utilisateur sur la page pendant que des modifications ont lieu dans le DOM au-dessus de l'emplacement actuel. Cela permet à l'utilisateur de rester ancré là où il se trouve sur la page même lorsque de nouveaux éléments sont chargés dans le DOM.
La overflow-anchorpropriété nous permet de désactiver la fonction d'ancrage de défilement dans le cas où il est préférable de permettre au contenu d'être redistribué lorsque les éléments sont chargés.
Syntaxe
article ( overflow-anchor: (auto | none ); )Valeurs
La overflow-anchorpropriété accepte deux valeurs qui indiquent essentiellement si la fonctionnalité est activée ou non.
auto(par défaut): active l'ancrage du défilement sur la partie de la page ou de l'élément sur lequel il est appliqué.none: Désactive l'ancrage du défilement dans une partie ou la totalité d'une page Web, ou exclut des parties du DOM de l'ancrage, ce qui permet au contenu d'être redistribué.
Vous l'appliqueriez probablement à body, mais vous pouvez l'étendre à n'importe quel sélecteur, et cela prendra effet si cet élément défile.
Démo
Dans cette démo, dès que vous faites défiler l'une des cases, elle ajoutera un tas de cases vertes en haut de cette div. Normalement, cela ferait baisser le contenu immédiatement, ce qui pourrait être une énorme distraction et perdre votre place dans le texte. Avec overflow-anchor: auto;, la place de défilement est préservée. overflow-anchor: none;permet aux div nouvellement insérés d'affecter la position de défilement.
Voir l'ancre de débordement Pen de Chris Coyier (@chriscoyier) sur CodePen.
Une autre chose qui peut être super utile est d'épingler la position de défilement d'un élément vers le bas. Par exemple, une application de chat où les nouveaux messages sont ajoutés au DOM en bas et vous voulez que la position de défilement reste en bas pour afficher tous les nouveaux messages:
Voir le
défilement du Pen "Stay at the bottom" avec scroll-anchor par Chris Coyier (@chriscoyier)
sur CodePen.
Prise en charge du navigateur
Au moment de la rédaction de cet article, ce overflow-anchorn'est pas une norme W3C actuelle, bien que le projet de rapport de la spécification proposée soit disponible pour lecture et ait été adopté par Chrome depuis la version 56. Mozilla envisage une fonctionnalité similaire dans Firefox. À mesure que de plus en plus de navigateurs adoptent la fonction d'ancrage du défilement, nous pouvons nous attendre à voir une prise en charge accrue du navigateur overflow-anchorcar elle donne un contrôle explicite pour désactiver la fonctionnalité.
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 56 | 66 | Non | 79 | Non |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | Non |
Plus d'information
- Ancrage de défilement: avant-projet de la spécification d'ancrage de défilement
- Blog Chromium: le billet de blog annonçant l'inclusion par Chrome de Scroll Anchoring et de la propriété CSS dans la version 56
- Bugzilla Ticket # 43114: Open ticket pour inclure la propriété dans Firefox