Propriété scroll-margin-bottom CSS

Définition et utilisation

scroll-margin-bottom La propriété spécifie la distance entre la position d'absorption et le conteneur.

La position d'adhérence est la position à laquelle l'élément enfant se fixe dans le conteneur lors de l'arrêt du défilement.

La position d'adhérence est scroll-snap-align Les propriétés de l'attribut, mais peut également être affectée par les propriétés CSS La position d'adhérence est définie par et writing-mode Propriété

L'effet.Attention :

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

Exemple

Exemple 1

Définir le marging inférieur de défilement entre la position d'adhérence et le conteneur à 20px :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-margin-bottom L'attribut peut être utilisé pour des galeries d'images avec un comportement d'adhérence. Dans cet exemple,scroll-margin-bottom Faites comprendre à l'utilisateur qu'il y a une autre image en bas. Faites défiler au-delà de la première image pour voir l'effet :

#container > img {
  scroll-margin-bottom: 30px;
}

Essayez-le vous-même

Exemple 3 : Position d'adhérence

Pour que scroll-margin-bottom L'attribut est activé, la position d'adhérence doit être définie sur le 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 vers la gauche. Lorsque vous utilisez ce code,scroll-margin-bottom L'attribut ne sera plus valable :

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

Essayez-le vous-même

Syntaxe CSS

scroll-margin-bottom: 0|value|initial|inherit;

Valeur de l'attribut

Valeur Description
0 Le marging inférieur de défilement en bas est de zéro. C'est la valeur par défaut.
length

Définir le marging inférieur de défilement en px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Réinitialisez cette propriété à sa valeur par défaut. Voir : initial.
inherit Cette propriété est héritée de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : none
Héritabilité : Non
Réalisation de l'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollMarginBottom="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 :Attribut direction de CSS

Référence :Propriété scroll-snap-align CSS

Référence :Propriété scroll-snap-type CSS

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