Attribut scroll-padding-block-start CSS

Définition et utilisation

scroll-padding-block-start L'attribut spécifie la distance entre la position d'adhérence de l'élément fils et le point de départ du conteneur dans la direction de bloc.

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

doit être définie.

La position d'attraction est la position où l'élément enfant s'attache au conteneur lorsque vous arrêtez de dérouler.Remarque : scroll-snap-align Cette propriété n'a d'effet que dans la direction du bloc.

doit être réglé sur 'start' pour être efficace. scroll-padding-block-start sur l'élément parent, pour obtenir l'effet sur l'élément enfant, l'attribut scroll-snap-align attribut, et définissez l'attribut scroll-padding-block-start et scroll-snap-type attribut.

Exemple

Exemple 1

Définissez la marge interne de défilement en bloc directionnel de 20px à partir de la position de départ du conteneur jusqu'à la position d'attraction :

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

Essayez-le vous-même

Exemple 2 : bibliothèque d'images

Dans un album photo avec un comportement d'attraction, vous pouvez utiliser scroll-padding-block-start L'attribut pousse l'image sous l'élément fixe :

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

Essayez-le 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 dans la direction du bloc et les éléments enfants se déplacent du haut vers la droite. Cela affecte le comportement d'attraction du défilement ainsi que scroll-padding-block-start Fonctionnement de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

scroll-padding-block-start: auto|value|initial|inherit;

Valeur de l'attribut

Détails techniques

Prise en charge du navigateur

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

Pages connexes

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

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

Référence :propriété writing-mode CSS