Attribut scroll-margin-inline CSS

Définition et utilisation

scroll-margin-inline Cet attribut spécifie la distance entre la position d'adhérence et le conteneur en 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 à la distance spécifiée en direction en ligne, situé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 mises en page 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 à laquelle l'élément enfant se fixe dans le conteneur lorsque le défilement cesse.

scroll-margin-inline Cet attribut est une abréviation des attributs suivants :

• scroll-margin-inline-start
• scroll-margin-inline-end

Si l'attribut scroll-margin-inline a deux valeurs :

scroll-margin-inline: 20px 70px;

• La distance de début est de 20px
• La distance de fin est de 70px

Si l'attribut scroll-margin-inline a une valeur :

scroll-margin-inline: 20px;

• La distance de début et de fin est de 20px

Pour voir scroll-margin-inline L'effet des propriétés doit être configuré sur les éléments enfants scroll-margin-inline et scroll-snap-align l'attribut, et le configurez sur l'élément parent scroll-snap-type attribut.

de CSS scroll-margin-inline et scroll-margin-block l'attribut est similaire à l'attribut CSS Attribut scroll-margin-top CSS,scroll-margin-bottom,scroll-margin-left et scroll-margin-right très semblable, mais scroll-margin-block et scroll-margin-inline L'attribut dépend de la direction de bloc et de la direction inline.

Exemple

Exemple 1

Définit la distance entre la position d'adhésion et le conteneur glissant dans la direction inline :

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

Essayer par vous-même

Exemple 2

Lorsque l'élément <div> a writing-mode Lorsque l'attribut scroll-margin-inline est réglé sur vertical-rl, la direction inline est vers le bas. Le résultat est que la position de départ de l'élément se déplace vers le haut, et la position de fin de l'élément se déplace vers le bas. Cela affecte également scroll-margin-inline Attribut :

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

Essayer par vous-même

Exemple 3

Lorsque l'élément <div> a direction Lorsque l'attribut scroll-margin-inline est réglé sur rtl, la direction inline est de droite à gauche. Le résultat est que la position de départ de l'élément se déplace vers la droite, et la position de fin de l'élément se déplace vers la gauche. Cela affecte également scroll-margin-inline Attribut :

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

Essayer par vous-même

Syntaxe CSS

scroll-margin-inline: 0|value|initial|inherit;

Valeur de l'attribut

Détails techniques

Support du navigateur

Les nombres dans le tableau indiquent 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-margin-inline-end CSS

Référence :Attribut scroll-margin-inline-start 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