Attribut scroll-padding-inline-end CSS

Définition et utilisation

scroll-padding-inline-end Cette propriété spécifie la distance en direction en ligne entre la fin du conteneur et la position d'alignement de l'élément.

Cela signifie que lorsque vous arrêtez de faire défiler, le défilement s'ajuste rapidement et s'arrête à la distance spécifiée entre la position d'alignement et le conteneur.

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

La position d'alignement signifie la position où les éléments enfants s'alignent dans le conteneur lorsque vous arrêtez de faire défiler.

Attention :Cette propriété ne s'applique qu'à scroll-snap-align Cette propriété ne fonctionne que lorsque l'orientation en ligne est définie sur 'end'.

Pour voir scroll-padding-inline-end L'effet de l'attribut doit être défini sur l'élément enfant scroll-snap-align Attribut, et définir scroll-padding-inline-end et scroll-snap-type Attribut.

Exemple

Exemple 1

Définir la marge de défilement inline directionnelle de l'extrémité du conteneur à l'emplacement d'alignement sur 20px :

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

Essayez-le vous-même

Exemple 2 : bibliothèque d'images

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

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

Essayez-le vous-même

Exemple 3

Lorsque l'élément conteneur a writing-mode Lorsque l'attribut est défini sur 'vertical-rl', le début de la direction inline du conteneur et des éléments enfants se déplace du côté gauche vers le haut, tandis que le bout de fin se déplace du côté droit vers le bas. Cela affecte le comportement d'alignement du défilement ainsi que scroll-padding-inline-end Fonctionnement de l'attribut :

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

Essayez-le vous-même

Exemple 4

Lorsque l'élément conteneur a direction Lorsque l'attribut est défini sur 'rtl', le bout de fin du conteneur et des éléments enfants dans la direction inline se déplace de la droite vers la gauche. Cela affecte le comportement d'alignement du défilement ainsi que scroll-padding-inline-end Fonctionnement de l'attribut :

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Détails techniques

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.

pages associées

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