Attribut scroll-margin-left CSS

Définition et utilisation

scroll-margin-left 属性指定吸附位置与容器之间的距离。

La propriété spécifie la distance entre la position d'adhérence et le conteneur. scroll-snap-align La position d'adhérence est la position où l'élément enfant est fixé dans le conteneur lorsqu'il cesse de dérouler. La position d'adhérence est spécifiée par direction et La propriété est définie, mais peut également être affectée par les propriétés CSS writing-mode

l'effet.Attention :

Cette propriété ne fonctionne que lorsque la position d'adhérence est définie à la gauche de l'élément enfant. scroll-margin-left Les effets des propriétés doivent être définis sur l'élément enfant pour voir scroll-margin-left et scroll-snap-align La propriété, et définir sur l'élément parent scroll-snap-type propriété.

Exemple

Exemple 1

Définissez la marge extérieure de défilement entre la position d'adhérence et le conteneur à 20px :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-margin-left La propriété peut être utilisée dans des galeries d'images avec un comportement d'adhérence. Ici,scroll-margin-left Informer l'utilisateur qu'il y a une autre image à gauche. Faites défiler au-delà de la première image pour voir l'effet :

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

Essayez-le vous-même

Exemple 3 : Position d'adhérence

Pour que scroll-margin-left La propriété est active, la position d'adhérence doit être définie à la gauche de l'élément enfant. Dans cet exemple,direction La propriété change la position d'adhérence de la gauche de l'élément enfant vers la droite. Utilisez ce code pourscroll-margin-left Les propriétés suivantes ne seront plus actives :

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
0 La marge extérieure de défilement de gauche est de 0. Valeur par défaut.
length

Spécifiez la valeur de la marge extérieure de défilement de gauche en px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
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 : 0
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.scrollMarginLeft="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 CSS

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

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

Référence :Attribut writing-mode CSS