Attribut scroll-padding-block CSS

Définition et utilisation

scroll-padding-block Cet attribut spécifie la distance entre le conteneur et la position d'adhérence de l'élément enfant dans la direction de 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 et le conteneur dans la direction de bloc.

La direction de bloc est la direction de placement de la ligne suivante par rapport à la position de la ligne existante, c'est aussi la manière dont les balises avec CSS display: block; (comme les balises <p> et <div>) sont disposées sur la page. La direction de 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 de bloc est également de gauche à droite, tandis que sur une page anglaise, la direction de bloc est vers le bas. La direction de bloc peut être définie par l'attribut CSS, writing-mode Définir.

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

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

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

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Les valeurs de l'attribut peuvent être configurées de différentes manières :

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

scroll-padding-block: 10px 50px;

• La distance de début est de 10px
• La distance de fin est de 50px

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

scroll-padding-block: 10px;

• La distance de début et de fin est de 10px

Pour voir scroll-padding-block L'effet des propriétés doit être configuré sur les éléments enfants scroll-snap-align attribut, et définir scroll-padding-block et scroll-snap-type .

des attributs CSS scroll-padding-block et scroll-padding-inline Les attributs sont similaires aux attributs CSS Attribut scroll-padding-top CSS,scroll-padding-bottom,scroll-padding-left et scroll-padding-right très semblable, mais scroll-padding-block et scroll-padding-inline L'attribut dépend de la direction en bloc et de la direction en ligne.

Exemple

Exemple 1

Définir la marge interne en bloc sur 20px de la conteneur à la position d'attraction :

div {
  scroll-padding-block: 20px;
}

Essayer par vous-même

Exemple 2 : Bibliothèque d'images

scroll-padding-block L'attribut peut être utilisé pour des galeries d'images avec un comportement d'attraction pour pousser les images sous un élément fixe :

#container {
  scroll-padding-block: 30px 0;
}

Essayer par vous-même

Exemple 3

Lorsque l'élément conteneur writing-mode Lorsque l'attribut est réglé sur vertical-rl, la position de départ du conteneur et des éléments enfants sur la direction en bloc est déplacée du haut vers la droite, et la position de fin est déplacée du bas vers la gauche. Cela affecte le comportement d'attraction des滚动 et scroll-padding-block Fonctionnement de l'attribut :

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

Essayer par vous-même

Syntaxe CSS

scroll-padding-block: auto|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 connexes

Référence :Attribut scroll-padding-block-end CSS

Référence :Attribut scroll-padding-block-start CSS

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

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

Référence :Attribut writing-mode CSS