Attribut scroll-margin-block de CSS

Définition et utilisation

scroll-margin-block Cet attribut spécifie la distance entre la position d'adhérence (snap position) et le conteneur dans la direction bloc.

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 dans la direction bloc et le conteneur.

La direction bloc est la direction dans laquelle la prochaine ligne est placée par rapport à la position de la ligne existante, c'est aussi la manière dont les balises ayant CSS display: block; (comme les balises <p> et <div>) sont disposées sur la page. La direction bloc dépend de la langue d'écriture, par exemple, les nouvelles lignes en mongol sont alignées de gauche à droite, donc la direction bloc est également de gauche à droite, tandis que la direction bloc des pages en anglais est vers le bas. La direction 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.

Attention :Cette propriété n'est valable que dans la direction bloc de scroll-snap-align Cet attribut est valide lorsque la valeur est 'start' ou 'end'.

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

scroll-margin-block La valeur de l'attribut peut être définie de différentes manières :

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

scroll-margin-block: 10px 50px;
  • La distance à partir du début est de 10px
  • La distance à partir de la fin est de 50px

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

scroll-margin-block: 10px;
  • La distance à partir du début et de la fin est de 10px

Pour voir scroll-margin-block L'effet de l'attribut, doit être configuré sur l'élément enfant scroll-margin-block et scroll-snap-align L'attribut, et configurer l'attribut scroll-snap-type attributs.

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 très semblable, 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 entre la position d'adhérence dans la direction de bloc et le conteneur défilable :

div {
  scroll-margin-block: 10px;
}

Essayez-le vous-même

Exemple 2

Lorsque l'élément enfant writing-mode Lorsque l'attribut value est vertical-rl, la position de départ de l'élément dans la direction de bloc est déplacée vers la droite depuis le haut, et la position de fin est déplacée vers la gauche depuis le bas. Cela affecte le comportement d'adhérence du défilement ainsi que scroll-margin-block Fonctionnement de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

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

Spécifier une distance avec des unités telles que px, pt, cm. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Régler 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.scrollMarginBlock="20px"

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.

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

Pages associées

Référence :Attribut scroll-margin-block-end de CSS

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