Attribut scroll-padding-bottom CSS

Définition et utilisation

scroll-padding-bottom propriété spécifie la distance entre le bas du conteneur et la position d'adhérence de l'élément enfant.

La position d'adhérence est la position à laquelle l'élément enfant se fixe dans le conteneur lorsque vous arrêtez de faire défiler. La position d'adhérence est définie par scroll-snap-align paramètres de propriété, mais peut également être affecté par les propriétés CSS direction et writing-mode l'impact.

注意：Remarque :

Cette propriété ne fonctionne que lorsque la position d'adhérence est définie à la bas de l'élément enfant. scroll-padding-bottom L'effet des attributs doit être défini sur l'élément enfant pour voir scroll-snap-align Les attributs, et définir sur l'élément parent scroll-padding-bottom et scroll-snap-type L'attribut.

Exemple

Exemple 1

Définir le remplissage de défilement de la marge inférieure du conteneur à la position d'adhérence à 20px :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

Dans un album photo avec un comportement d'adhérence, vous pouvez utiliser scroll-padding-bottom L'attribut pousse l'image vers l'élément fixe au-dessus :

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

Essayez-le vous-même

Exemple 3 : Définir le remplissage inférieur de défilement

Lorsque vous définissez des comportements d'adhérence dans deux directions, vous pouvez également définir sur le conteneur scroll-padding-bottom L'attribut. Faites défiler verticalement vers le bas pour voir l'effet :

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

Essayez-le vous-même

Exemple 4 : Position d'adhérence

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

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Le navigateur calcule le remplissage.
length

Définir scroll-padding-bottom en utilisant des unités telles que px, pt, cm.

Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
% Définit la valeur en pourcentage de la largeur de l'élément contenant comme marge intérieure.
initial Réinitialise 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
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollPaddingBottom="20px"

Support 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 Opera
69.0 79.0 68.0 14.1 56.0

pages associées

Référence :Attribut direction 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