Guide : ancrage du défilement (scroll anchoring)

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

Comment cela fonctionne ?

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

Comment activer l'ancrage du défilement ?

Il n'y a rien à faire. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

Si besoin, que faire pour le désactiver ?

La spécification fournit une nouvelle propriété : overflow-anchor. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

Les valeurs utilisables pour cette propriété sont auto ou none :

  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément <body> :

css
body {
  overflow-anchor: none;
}

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

css
.container {
  overflow-anchor: none;
}

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

Supression triggers

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi