Attribut scroll-padding-inline-start CSS

Définition et utilisation

scroll-padding-inline-start l'attribut spécifie la distance entre la position d'adhérence de l'élément enfant et le point de départ du conteneur dans la direction en ligne.

Ce qui 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 et le conteneur.

La direction en ligne est la direction dans laquelle le prochain caractère est placé par rapport au caractère existant dans une ligne, c'est aussi la manière dont les balises (comme <a> et <strong>) avec CSS display: inline; sont disposées dans le texte. La direction en ligne dépend de la langue d'écriture, par exemple, les nouveaux caractères en arabe sont alignés de droite à gauche, donc la direction en ligne est de droite à gauche, tandis que la direction en ligne sur une page anglaise est de gauche à droite. La direction en ligne peut être définie par l'attribut CSS direction et writing-mode Définition.

La position d'adhérence est la position où les éléments enfants s'attachent dans le conteneur lorsque vous arrêtez de faire défiler.

Attention :Cette propriété ne fonctionne que dans la direction en ligne scroll-snap-align l'attribut fonctionne uniquement lorsque sa valeur est 'start'.

voir scroll-padding-inline-start l'attribut pour voir l'effet, il faut le configurer sur les éléments enfants scroll-snap-align l'attribut, et il faut le configurer sur l'élément parent scroll-padding-inline-start et scroll-snap-type Propriété.

Exemple

Exemple 1

Définir un espace intérieur de défilement de 20px de la position de départ du conteneur à la position d'attraction en direction en ligne :

div {
  scroll-padding-inline-start: 20px;
}

Essayez-le vous-même

Exemple 2 : bibliothèque d'images

scroll-padding-inline-start Cette propriété peut être utilisée dans des galeries d'images avec un comportement d'attraction pour pousser les images derrière un élément fixe :

#container {
  scroll-padding-inline-start: 30px;
}

Essayez-le vous-même

Exemple 3

Lorsque l'élément conteneur writing-mode Lorsque la valeur de l'attribut est 'vertical-rl', la position de départ du conteneur et de ses éléments enfants sur la direction en ligne se déplace du haut vers la droite. Cela affecte le comportement d'attraction en défilement ainsi que scroll-padding-inline-start Fonctionnement de l'attribut :

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 4

Lorsque l'élément conteneur direction Lorsque la valeur de l'attribut est 'rtl', la position de départ du conteneur et de ses éléments enfants sur la direction en ligne se déplace de la droite vers la gauche, et la position de fin du conteneur et de ses éléments enfants se déplace du côté droit vers le bas. Cela affecte le comportement d'attraction en défilement ainsi que scroll-padding-inline Fonctionnement de l'attribut :

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Essayez-le vous-même

Syntaxe CSS

scroll-padding-inline-start: auto|value|initial|inherit;

Valeur de l'attribut

Détails techniques

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.

Pages associées

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 :Attribut writing-mode CSS