Scroll-padding - Astuces CSS

Anonim

scroll-paddingfait 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-paddingest une propriété facultative pour tout conteneur d'accrochage au défilement. Les conteneurs de capture de défilement sont définis chaque fois que la scroll-snap-typepropriété est définie sur une valeur quelconque none. Pour plus d'informations sur les conteneurs d'accrochage de défilement, consultez l' scroll-snap-typeentrée almanach.

OK, alors passez au remplissage de défilement

scroll-paddingest utilisé pour ajuster la zone de visualisation optimale du conteneur de capture. Ceci est utile si le conteneur a des éléments tels qu'un en-tête fixe qui obscurcirait les éléments à l'intérieur ou si le conteneur à défilement a besoin d'un peu d'espace pour donner aux éléments intérieurs de la place pour respirer une fois qu'ils ont été «accrochés» en position.

Un exemple simple serait d'utiliser scroll-paddingpour créer un espacement fixe 50pxen haut et à gauche du conteneur:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Les zones en rose montrent le rembourrage de défilement sur le conteneur d'accrochage de défilement.

Syntaxe

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

Remarque importante sur les longues mains: Chrome 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-padding accepte les valeurs suivantes:

  • autolaisse le remplissage à déterminer par le navigateur / l'agent utilisateur. Généralement, cela signifie une valeur de 0px, mais peut être différente de zéro si l'agent utilisateur décide qu'une autre valeur est plus appropriée.
  • est similaire à l' écrit paddinget d' autres propriétés dont la valeur peut être définie avec les unités ( px, em, vh, etc.) ou en pourcentage du conteneur lui - même.

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