Scroll-snap-stop - Astuces CSS

Anonim

scroll-snap-stopfait partie du module CSS Scroll Snap. La capture de défilement fait référence au «verrouillage» de la position de la fenêtre sur des éléments spécifiques de la page lorsque la fenêtre (ou un conteneur à défilement) fait défiler. Pensez à un conteneur qui capture le défilement, comme placer un aimant au-dessus d'un élément qui colle en haut de la fenêtre et oblige la page à arrêter de défiler à cet endroit.

scroll-snap-stopest une propriété facultative pour un élément d'accrochage de défilement dans un conteneur d'accrochage de défilement. Pour plus d'informations sur les conteneurs d'accrochage de défilement, consultez l' scroll-snap-typeentrée almanach.

scroll-snap-stopvous permet de forcer le conteneur d'accrochage au défilement à s'aligner sur un élément particulier. Supposons que vous fassiez défiler dans un conteneur à accrochage de défilement et que vous lui ayez donné un tour de souris géant. Normalement, le navigateur laisse la vitesse de votre défilement voler au-delà des points d'accrochage jusqu'à ce qu'elle se stabilise sur un point d'accrochage proche de l'endroit où le défilement se terminerait normalement. En définissant, scroll-snap-stopvous pouvez indiquer au navigateur qu'il doit s'arrêter sur un élément particulier avant de permettre à l'utilisateur de le dépasser.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Syntaxe

scroll-snap-stop: normal | always;

Valeurs

scroll-snap-stop accepte les valeurs suivantes:

  • normal est la valeur par défaut et permet de faire défiler un élément sans accrochage
  • always forcera le navigateur à s'accrocher à cet élément, même si le défilement passerait normalement devant cet élément

Exemple

Voir l'exemple Pen scroll-snap-stop
par CSS-Tricks (@ css-tricks) sur CodePen.

Prise en charge du navigateur

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
69 68 11 * 79 11

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 11,0-11,2

Notez que Chrome peut ne pas prendre scroll-snap-stop: always;en charge pour le moment.

En rapport

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ressources

  • Recommandation du candidat CSS Scroll Snap W3C
  • Capture de défilement CSS pratique
  • Présentation des points d'accrochage CSS Scroll