Ledé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 lesfonctionnalité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 unconteneur 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

Leconteneur 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 quescroll-snap-type est défini sur une valeur autre quenone, 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

Leport d'accrochage est la zone duport 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. Leszones d'accrochage sont alignées sur le port de défilement.

Zone d'accrochage

Lazone d'accrochage d'un élément dans un conteneur de défilement est la zone définie à l'aide des margesscroll-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.

Voir aussi

• La propriété CSSscroll-snap-type
• La propriété CSSscroll-snap-align
• La propriété CSSscroll-padding
• La propriété CSSscroll-margin
• Le module d'accrochage au défilement CSS