Attribut scroll-padding-right CSS

Définition et utilisation

scroll-padding-right l'attribut spécifie la distance entre le côté droit du conteneur et la position d'attraction de l'élément enfant.

la position d'attraction se réfère à la position où l'élément enfant est吸附到位 dans le conteneur lors de l'arrêt du défilement.

la position d'attraction est déterminée par scroll-snap-align les propriétés de l'attribut, mais peuvent également être affectées par les attributs CSS direction et writing-mode d'influence.

Attention :此属性仅在吸附位置设置在子元素右侧时有效。

Cette propriété ne fonctionne que lorsque la position d'attachement est configurée à la droite de l'élément enfant. scroll-padding-right l'effet de l'attribut doit être configuré sur l'élément enfant pour voir scroll-snap-align les attributs, et définissez scroll-padding-right et scroll-snap-type Propriété.

Exemple

Exemple 1

Définissez la marge intérieure de défilement à une distance de 20px de la droite du conteneur à la position d'attachement :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-padding-right L'attribut peut être utilisé dans des galeries d'images avec un comportement d'attachement pour pousser les images derrière un élément fixe dans la vue :

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

Essayez-le vous-même

Exemple 3 : Définir la marge intérieure de défilement à droite

Lorsque des comportements d'attachement sont définis dans les deux directions, vous pouvez également définir sur le conteneur scroll-padding-right l'attribut. Faites défiler horizontalement vers l'élément suivant pour voir l'effet :

#container > div {
  scroll-padding-right: 30px;
}

Essayez-le vous-même

Exemple 4 : Position d'attachement

Pour que scroll-padding-right l'attribut est actif, l'attachement de position doit être configuré à la droite de l'élément enfant. Dans cet exemple,direction La valeur de l'attribut 'rtl' changera l'attachement de position de la droite de l'élément enfant à la gauche. Lorsque vous utilisez ce code,scroll-padding-right Les propriétés suivantes ne seront plus actives :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Le navigateur calcule la marge intérieure.
length

Spécifiez scroll-padding-right en utilisant des unités telles que px, pt, cm.

Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
% Spécifiez un pourcentage de la largeur de l'élément contenant en tant que marge intérieure.
initial Règle 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
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollPaddingRight="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 connexes

Référence :Propriété direction de 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