Attribut scroll-padding-inline CSS

Recommandation de cours :

scroll-padding-inline Définition et utilisation

propriété spécifie la distance de l'élément enfant à la position d'adhérence dans la direction horizontale.

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'adhérence et le conteneur. direction et writing-mode Le sens horizontal d'alignement des caractères est la direction vers laquelle le prochain caractère est placé par rapport à la position des caractères existants dans une ligne. C'est aussi la manière dont les balises (comme <a> et <strong>) avec CSS display: inline; sont alignées dans le texte. Le sens horizontal d'alignement dépend de la langue d'écriture, par exemple, les nouveaux caractères en arabe sont alignés de droite à gauche, ce qui rend le sens horizontal d'alignement de droite à gauche, tandis que la page anglaise a un sens horizontal d'alignement de gauche à droite. Le sens horizontal d'alignement peut être défini par la propriété CSS

pour définir.

La position d'adhérence est la position à laquelle l'élément enfant se fixe dans le conteneur lorsque vous arrêtez de faire défiler.Attention :scroll-snap-align Cette propriété ne s'applique qu'au sens horizontal de l'alignement des caractères.

l'attribut est efficace uniquement lorsque l'attribut est réglé sur 'start' ou 'end'.

• la propriété scroll-padding-inline est une abréviation des propriétés suivantes :
• scroll-padding-inline-end

scroll-padding-inline scroll-padding-inline-start

les valeurs de la propriété peuvent être configurées de différentes manières :

si la propriété scroll-padding-inline a deux valeurs :

• scroll-padding-inline: 10px 50px;
• la distance à partir du début est de 10px

la distance à partir de la fin est de 50px

si la propriété scroll-padding-inline a une valeur :

• scroll-padding-inline: 10px;

la distance à partir du début et de la fin est de 10px scroll-padding-inline propriété sur l'élément enfant pour voir scroll-snap-align propriété, et il faut le configurer sur l'élément parent scroll-padding-inline et scroll-snap-type propriété.

propriété CSS scroll-padding-block et scroll-padding-inline propriété et propriété CSS Attribut scroll-padding-top CSS、scroll-padding-bottom、scroll-padding-left et scroll-padding-right très similaire, mais scroll-padding-block et scroll-padding-inline L'attribut dépend de la direction en bloc et de la direction en ligne.

Exemple

Exemple 1

Définir l'indentation interne de défilement en ligne, de 20px du conteneur à la position d'attraction :

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

Essayez-le vous-même

Exemple 2 : bibliothèque d'images

Dans un album photo avec un comportement d'attraction en défilement, vous pouvez utiliser scroll-padding-inline L'attribut éloigne l'image du élément fixe :

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

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 point de départ des conteneurs et des éléments enfants sur la direction en ligne se déplace du côté gauche vers le haut, et la position de fin 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: 20px 0;
  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 point de départ des conteneurs et des éléments enfants sur la direction en ligne se déplace de la droite vers la gauche. Cela affecte le comportement d'attraction en défilement ainsi que scroll-padding-inline Fonctionnement de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

scroll-padding-inline: 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 :propriété writing-mode de CSS