Attribut scroll-margin CSS

Définition et utilisation

scroll-margin Cet attribut spécifie la distance entre la position d'adhérence et le conteneur.

Cela signifie que lorsque vous arrêtez de faire défiler, le défilement s'ajuste rapidement et s'arrête à une distance spécifiée entre la position d'adhérence (snap position) et le conteneur.

La position d'adhérence est la position à laquelle l'élément enfant s'attache dans le conteneur lorsque le défilement cesse.

scroll-margin Cet attribut est une abréviation des attributs suivants :

scroll-margin Les valeurs de l'attribut peuvent être définies de différentes manières :

Si l'attribut scroll-margin a quatre valeurs :

scroll-margin: 15px 30px 60px 90px;
  • La distance du haut est de 15px
  • La distance de la droite est de 30px
  • La distance du bas est de 60px
  • La distance de la gauche est de 90px

Si l'attribut scroll-margin a trois valeurs :

scroll-margin: 15px 30px 60px;
  • La distance du haut est de 15px
  • Les distances latérales sont de 30px
  • La distance du bas est de 60px

Si l'attribut scroll-margin a deux valeurs :

scroll-margin: 15px 30px;
  • Les distances supérieure et inférieure sont de 15px
  • Les distances latérales sont de 30px

Si l'attribut scroll-margin a une valeur :

scroll-margin: 10px;
  • Les distances des quatre directions sont de 10px

Pour voir scroll-margin L'effet des propriétés scroll-margin et scroll-snap-align Propriété, et définir sur l'élément parent scroll-snap-type Propriété.

Note :Dans l'exemple suivant, la marge de défilement externe a été définie pour toutes les côtés, mais en raison de scroll-snap-align L'attribut est défini sur "start", donc seule la marge de défilement supérieure change le comportement de défilement.

Exemple

Exemple 1

Définir la marge de défilement externe entre la position d'attraction et le conteneur à 20px :

div {
  scroll-margin: 20px;
}

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-margin Cette propriété peut être utilisée dans des bibliothèques d'images avec un comportement d'attraction. Ici,scroll-margin Permet à l'utilisateur de voir qu'il y a encore une image à gauche. Défilez au-delà de la première image pour voir l'effet :

#container > img {
  scroll-margin: 0 0 0 30px;
}
Beijing Dancer Wuhan Tulipe Hangzhou

Essayez-le vous-même

Exemple 3 : Définir la marge de défilement externe en bas et à droite

Peut être définie en bas et à droite de l'élément. scroll-margin Propriété. Défilement horizontal et vertical vers l'élément suivant pour voir l'effet :

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
0 La marge de défilement externe est de zéro. Valeur par défaut.
length

Spécifier la marge de défilement externe en px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Définir cette propriété à sa valeur par défaut. Voir : initial.
inherit Hérite cette propriété de l'élément parent. Voir : inherit.

Détails techniques

Valeur par défaut : 0
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.scrollMargin="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 90.0 14.1 56.0

Pages associées

Référence :Attribut scroll-margin-bottom CSS

Référence :Attribut scroll-margin-left CSS

Référence :Attribut scroll-margin-right CSS

Référence :Attribut scroll-margin-top CSS

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

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