Marge de défilement - Astuces CSS

Anonim

scroll-marginfait 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-marginest 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.

Entrez la marge de défilement

scroll-marginest utilisé pour ajuster la zone d'accrochage d'un élément (la zone qui définit l'endroit où l'élément sera accroché). L'ajout scroll-marginest utile lorsque vous devez donner à un élément un espace à partir du bord du conteneur lorsqu'il est enclenché, mais en tenant compte des situations où chaque élément peut nécessiter un espacement légèrement différent. Si tous les éléments ont les mêmes exigences d'espacement, envisagez d'utiliser scroll-paddingsur le conteneur parent au lieu de scroll-margincar cela affecte l'espacement de tous les éléments dans le conteneur.

Un exemple simple où le scroll-marginpermet un espacement de 50 px autour du haut et de la gauche d'un élément ressemble à ceci:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
La zone rose représente le scroll-marginsur cet élément.

Syntaxe

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Remarque importante sur les longues mains: Chrome (et éventuellement d'autres navigateurs) ne prend actuellement pas en charge le format long scroll-paddinget les scroll-marginpropriétés. Utilisez le raccourci pour une prise en charge maximale du navigateur. Consultez ce problème sur le suivi des bogues de chrome pour plus de détails et l'état actuel.

Valeurs

scroll-marginaccepte ce qui suit une longueur valeur, ce qui est écrit semblable à marginet d' autres propriétés où la valeur peut être définie avec les unités ( px, em, vh, etc.). Voir le module Valeurs et Unités du W3C pour plus d'informations. Les pourcentages ne peuvent pas être utilisés scroll-marginselon les spécifications.

Exemple

Voir l'exemple de remplissage de défilement Pen
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

En rapport

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ressources

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