Attribut scroll-margin-inline-end CSS

Définition et utilisation

scroll-margin-inline-end L'attribut spécifie la distance entre la position d'attraction et le conteneur en 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 en direction en ligne, cette distance est la distance entre la position d'attraction de l'extrémité de l'élément enfant 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 également 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'attraction est le point où l'élément enfant s'attache en position correcte dans le conteneur lorsque vous arrêtez de faire défiler.

Remarque :Cette propriété est définie uniquement en direction en ligne scroll-snap-align l'attribut est 'end' pour qu'il fonctionne.

Pour voir scroll-margin-inline-end attribut sur l'élément parent, et définir scroll-margin-inline-end et scroll-snap-align attribut, et définir scroll-snap-type attribut.

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

Exemple

Exemple 1

Définir la distance de l'endroit d'adhésion à la capacité de défilement en ligne :

div {
  scroll-margin-inline-end: 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 d'alignement en ligne est vers le bas. Le résultat est que l'extrémité de l'élément se déplace du côté droit vers le bas :

div {
  scroll-margin-inline-end: 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 d'alignement en ligne est de droite à gauche. Le résultat est que la extrémité de l'élément se déplace de la droite vers la gauche :

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

Essayez-le vous-même

Syntaxe CSS

scroll-margin-inline-end: 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 associées

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 :Propriété writing-mode CSS