Attribut scroll-margin-top CSS

Définition et utilisation

scroll-margin-top 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 scroll-snap-align L'attribut spécifie la distance entre la position d'adhérence et le conteneur. La position d'adhérence est la position où l'élément enfant est fixé dans le conteneur lorsqu'il cesse de dérouler. La position d'adhérence est spécifiée par et writing-mode property

l'effet.Remarque :

Ce attribut ne fonctionne que lorsque la position d'adhérence est définie sur la partie supérieure de l'élément enfant. scroll-margin-top L'effet des attributs doit être configuré sur l'élément enfant pour voir scroll-margin-top et scroll-snap-align L'attribut, et configurer sur l'élément parent scroll-snap-type attribut.

Exemple

Exemple 1

Définir la marge extérieure de défilement supérieure entre l'élément d'adhérence et le conteneur à 20px :

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

Essayez-le vous-même

Exemple 2 : Bibliothèque d'images

scroll-margin-top L'attribut peut être utilisé dans des galeries d'images avec un comportement d'adhérence. Ici,scroll-margin-top Informer l'utilisateur qu'il y a une autre image en haut. Faites défiler au-delà de la première image pour voir l'effet :

#container > img {
  scroll-margin-top: 30px;
}

Essayez-le vous-même

Exemple 3 : Position d'adhérence

Pour rendre scroll-margin-top L'attribut est actif, la position d'adhérence doit être définie sur la partie supérieure de l'élément enfant. Dans cet exemple,writing-mode L'attribut change la position d'adhérence de la partie supérieure de l'élément enfant vers la droite. Utilisez ce code pourscroll-margin-top L'attribut ne jouera plus son rôle :

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

Essayez-le vous-même

Grammaire CSS

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

Valeur de l'attribut

Valeur Description
0 La marge extérieure de défilement supérieure est de 0. C'est la valeur par défaut.
length

Spécifiez la valeur de la marge extérieure de défilement supérieure en px, pt, cm, etc. Les valeurs négatives sont autorisées.

Voir :Unités CSS.
initial Set this property to its default value. See initial.
inherit Inherited this property from its parent element. See 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
Grammaire JavaScript : object.style.scrollMarginTop="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 connexes

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 :Attribut writing-mode CSS