Accrochage au défilement

Le défilement avec accrochage (scroll snapping en anglais) désigne le fait que le contenu « s'accroche » à une position précise, plutôt que de s'arrêter à un point aléatoire, lorsqu'une opération de défilement se termine. Les opérations de défilement normales manquent de précision. Elles ne s'alignent pas sur un paragraphe, une phrase ou la bordure d'une image. Par exemple, dans un carrousel, une opération de défilement pourrait s'arrêter au milieu d'une image, la rendant partiellement visible. Les développeur·euse·s web ont longtemps compté sur des solutions basées sur JavaScript. Les navigateurs prennent désormais en charge les fonctionnalités CSS de défilement avec accrochage qui permettent de définir des conteneurs de défilement avec accrochage et des comportements d'accrochage.

Le défilement avec accrochage offre une expérience de défilement bien contrôlée, dans laquelle les développeur·euse·s définissent un élément comme un conteneur de défilement avec des limites pour les opérations de défilement. Les opérations de défilement se terminent alors à ces limites de position d'accrochage, le contenu défilé venant s'aligner précisément. Dans l'exemple du carrousel ci-dessus, lorsque l'utilisateur·ice termine de faire défiler le carrousel, l'image visible s'aligne parfaitement.

Conteneur de défilement avec accrochage

Le conteneur de défilement avec accrochage est un conteneur de défilement auquel le défilement avec accrochage est appliqué. Par exemple, si une boîte a du contenu débordant et que scroll-snap-type est défini sur une valeur autre que none, alors la boîte capture les positions d'accrochage. Le conteneur de défilement avec accrochage d'une boîte est l'ancêtre le plus proche qui capture les positions d'accrochage. Si une boîte n'a pas de conteneur de défilement avec accrochage, ses positions d'accrochage, le cas échéant, ne déclencheront pas d'accrochage.

Port d'accrochage

Le port d'accrochage est la zone du port de défilement utilisée comme conteneur d'alignement pour les zones d'accrochage lors du calcul des positions d'accrochage. Par défaut, il correspond à la fenêtre d'affichage visuelle du conteneur de défilement, mais il s'agit de la zone du port de défilement définie par la propriété scroll-padding. Les zones d'accrochage sont alignées sur le port de défilement.

Zone d'accrochage

La zone d'accrochage d'un élément dans un conteneur de défilement est la zone définie à l'aide des marges scroll-margin spécifiées sur l'élément. La zone d'accrochage sert à aligner l'élément sur son port d'accrochage.

Cible d'accrochage

Un élément descendant à l'intérieur d'un conteneur de défilement avec accrochage sur lequel l'accrochage se produit lorsque le conteneur défile. La propriété scroll-snap-align définit la position d'accrochage de chaque cible d'accrochage.