Propriété CSS scroll-margin-block-end

Définition et utilisation

scroll-margin-block-end L'attribut spécifie la distance entre la position d'alignement en bloc et le conteneur.

Cela signifie que lorsque vous arrêtez de faire défiler, le défilement s'ajuste rapidement et s'arrête à la position d'attraction spécifiée entre la fin des éléments en bloc et le conteneur.

La direction en bloc se réfère à la position par rapport à la ligne existante, la direction dans laquelle la ligne suivante est placée. C'est également la manière dont les balises avec CSS display: block; (comme les balises <p> et <div>) sont disposées sur la page. La direction en bloc dépend de la langue d'écriture, par exemple, en mongol, les nouvelles lignes sont alignées de gauche à droite, donc la direction en bloc est également de gauche à droite, tandis que la direction en bloc des pages anglaises est vers le bas. La direction en bloc peut être définie par l'attribut CSS writing-mode Pour définir.

La position d'adhérence est la position où l'élément enfant se fixe dans le conteneur lorsque vous arrêtez de faire défiler.

Remarque :Cette propriété ne fonctionne que dans la direction du bloc. scroll-snap-align L'attribut fonctionne uniquement lorsque l'attribut value est réglé sur 'end'.

Pour voir scroll-margin-block-end doivent être définis sur l'élément enfant pour voir l'effet de cette propriété. scroll-margin-block-end et scroll-snap-align doivent être définis sur l'élément parent, et scroll-snap-type Les attributs

des propriétés 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 Très similaire, mais scroll-margin-block et scroll-margin-inline L'attribut dépend de la direction du bloc et de la direction en ligne.

Exemple

Exemple 1

Sur la direction du bloc, le positionnement d'alignement avec la marge extérieure de défilement du conteneur est réglé sur 20px :

div {
  scroll-margin-block-end: 20px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'élément <div> writing-mode Lorsque l'attribut value est réglé sur vertical-rl, la direction du bloc est de droite à gauche. Le résultat est que le bout de l'élément se déplace de bas en gauche :

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Essayez-le vous-même

Syntaxe CSS

scroll-margin-block-end: 0|value|initial|inherit;

Valeur de l'attribut

Valeur Description
0 Par défaut. La distance par défaut de scroll-margin-block-end de l'élément.
length

Spécifie une distance exprimée en px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Règle cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut : 0
Héritabilité : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollMarginBlockEnd="20px"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge entièrement cette propriété pour la première fois.

Chrome Edge Firefox Safari Opéra
69.0 79.0 68.0 14.1 56.0

Pages associées

Référence :Attribut scroll-snap-align CSS

Référence :Attribut scroll-snap-type CSS

Référence :Attribut writing-mode CSS