Attribut scroll-padding-left CSS

Définition et utilisation

scroll-padding-left La propriété spécifie la distance entre le côté gauche du conteneur et la position d'adsorption de l'élément.

La position d'adsorption est le point où l'élément fils est吸附 dans le conteneur lors de l'arrêt du défilement.

La position d'adsorption est déterminée par scroll-snap-align la propriété est définie, mais elle peut également être affectée par les propriétés CSS direction et writing-mode affecte.

Attention :Cette propriété ne fonctionne que lorsque la position d'adsorption est définie à gauche de l'élément fils.

Pour voir scroll-padding-left Les effets des attributs doivent être définis sur l'élément enfant. scroll-snap-align Les attributs, et définir scroll-padding-left et scroll-snap-type Attribut.

Exemple

Exemple 1

Définir la marge intérieure de défilement pour que la distance de la gauche du conteneur à la position d'adhérence soit de 20px :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

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

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

Essayez-le vous-même

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

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

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

Essayez-le vous-même

Exemple 4 : Position d'adhérence

Pour que scroll-padding-left L'attribut est actif, la position d'adhérence doit être définie sur la gauche de l'élément enfant. Dans cet exemple,direction La valeur de l'attribut 'rtl' change la position d'adhérence de la gauche vers la droite de l'élément enfant. Lorsque vous utilisez ce code,scroll-padding-left L'attribut ne fonctionnera plus :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

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

Définir scroll-padding-left avec des unités telles que px, pt, cm.

Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
% Définit un pourcentage de la largeur de l'élément contenant comme marge intérieure.
initial Récupère la valeur par défaut de cette propriété. 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 de l'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollPaddingLeft="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 68.0 14.1 56.0

page en relation

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