Attribut scroll-margin-inline-start CSS

Définition et utilisation

scroll-margin-inline-start L'attribut spécifie la distance entre la position d'adhésion et le conteneur dans la direction en ligne.

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ésion de l'élément fils et le conteneur, suivant la direction en ligne.

La direction en ligne fait référence à la position de placement du prochain caractère par rapport au caractère existant dans une ligne, c'est aussi la manière dont les balises (comme les balises <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 au conteneur lorsque vous arrêtez de faire défiler.

Note :Cette propriété ne fonctionne que scroll-snap-align ne fonctionnent que lorsque l'attribut inline est réglé sur 'start'.

de CSS scroll-margin-inline et scroll-margin-block Les attributs sont similaires aux attributs CSS Attribut scroll-margin-top CSS,scroll-margin-bottom,scroll-margin-left et scroll-margin-right Sont très similaires, mais scroll-margin-block et scroll-margin-inline L'attribut dépend de la direction en bloc et de la direction inline.

Exemple

Exemple 1

Définir la distance entre la position d'adhérence et le conteneur scrollable en ligne :

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

Essayez-le vous-même

Exemple 2

Lorsque l'attribut writing-mode Lorsque la valeur de l'attribut est définie sur vertical-rl, la direction inline est vers le bas. Le résultat est que la position de départ de l'élément est déplacée vers le haut :

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Exemple 3

Lorsque l'attribut direction Lorsque la valeur de l'attribut est définie sur rtl, la direction inline est de droite à gauche. Le résultat est que la position de départ de l'élément est ajustée :

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Essayez-le vous-même

Syntaxe CSS

inset-inline-start: 0|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 connexes

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