Attribut scroll-margin-right CSS

Définition et utilisation

scroll-margin-right La propriété spécifie la distance entre la position d'adhérence et le conteneur.

La position d'adhérence est la position où l'élément enfant est fixé dans le conteneur lorsque le défilement cesse. La position d'adhérence est spécifiée par scroll-snap-align La propriété est définie, mais peut également être affectée par les propriétés CSS direction et writing-mode Propriété de mise en page de l'écriture, mais peut également être affectée par les propriétés CSS

L'effet.Remarque :

Cette propriété ne fonctionne que lorsque la position d'adhérence est définie à la droite de l'élément enfant. scroll-margin-right Les effets des propriétés doivent être définis sur l'élément enfant pour voir scroll-margin-right et scroll-snap-align La propriété, et définissez 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-right: 20px;
}

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

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

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

Essayez-le vous-même

Exemple 3 : Position d'adhérence

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

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

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

Spécifiez la valeur de la marge extérieure de défilement droite en utilisant des unités telles que px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Définit 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.scrollMarginRight="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 :propriété writing-mode CSS