Attribut CSS scroll-margin-block-start

Définition et utilisation

l'attribut scroll-margin-block-start L'attribut spécifie la distance entre la position d'adhésion 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'adhésion des éléments enfants en bloc avec la distance spécifiée par rapport au conteneur.

La direction en bloc se réfère à la position de placement de la ligne suivante par rapport à la ligne existante, c'est également la manière dont les balises ayant 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, dans la langue mongole, les nouvelles lignes sont alignées de gauche à droite, donc la direction en bloc est 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 Définition.

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. l'attribut scroll-snap-align l'attribut est réglé sur 'start'.

l'effet de l'attribut. Il ne fonctionne que lorsque l'attribut scroll-margin-block-start doit être réglé sur l'élément enfant pour voir l'attribut scroll-margin-block-start et l'attribut scroll-snap-align doit être réglé sur l'élément parent, et l'attribut 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 sont très similaires, 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

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

div {
  scroll-margin-block-start: 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 la partie de début de l'élément se déplace vers la droite :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

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

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

Voir :Unités CSS.
initial Réinitialise 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
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollMarginBlockStart="20px"

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.

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