Attribut scroll-padding-top CSS

Définition et utilisation

scroll-padding-top L'attribut spécifie la distance entre le sommet du conteneur et la position d'adsorption de l'élément enfant.

La position d'adsorption est la position où l'élément enfant est吸附到位 dans le conteneur lorsque le défilement cesse.

La position d'adhérence est scroll-snap-align l'attribut est défini, mais peut également être affecté par les attributs CSS de direction et writing-mode de l'attribut

l'effet.Attention :

Cette propriété ne fonctionne que lorsque la position d'adhérence est définie sur le sommet de l'élément enfant. scroll-padding-top doit être défini sur l'élément enfant pour voir scroll-snap-align l'effet de l'attribut doit être défini sur l'élément parent, et scroll-padding-top et scroll-snap-type Attribut.

Exemple

Exemple 1

Définissez la marge intérieure de défilement à une distance de 20px du sommet du conteneur à la position d'adhérence :

div {
  scroll-padding-top: 20px;
}

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-padding-top L'attribut peut être utilisé dans des galeries d'images avec un comportement d'adhérence pour pousser les images sous un élément fixe :

#container {
  scroll-padding-top: 30px;
}

Essayez-le vous-même

Exemple 3 : Définir la marge intérieure de défilement en haut

Lorsque des comportements d'adhérence sont définis dans les deux directions, vous pouvez également définir scroll-padding-top l'attribut. Faites défiler verticalement vers l'élément suivant pour voir l'effet :

#container {
  scroll-padding-top: 30px;
}

Essayez-le vous-même

Exemple 4 : Position d'adhérence

Pour que scroll-padding-top l'attribut est activé, la position d'adhérence doit être définie sur le sommet de l'élément enfant. Dans cet exemple,writing-mode Lorsque vous utilisez ce code, l'attributscroll-padding-top L'attribut ne fonctionnera plus :

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Essayez-le vous-même

Syntaxe CSS

scroll-padding-top: auto|value|initial|inherit;

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Le navigateur calcule la marge intérieure.
length

Spécifiez scroll-padding-top en utilisant des unités telles que px, pt, cm.

Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
% Spécifiez un pourcentage de la largeur de l'élément contenant en tant que marge intérieure.
initial Règle cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : auto
Héritabilité : Non
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollPaddingTop="20px"

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opéra
69.0 79.0 68.0 14.1 56.0

Pages associées

Référence :Propriété direction de CSS

Référence :Attribut scroll-snap-align CSS

Référence :Attribut scroll-snap-type CSS

Référence :Propriété writing-mode CSS