Attribut scroll-padding-block-end CSS

Définition et utilisation

scroll-padding-block-end L'attribut spécifie la distance entre la fin du conteneur et la position d'attraction de l'élément en direction en bloc.

Cela signifie que lorsque vous arrêtez de faire défiler, le défilement ajuste rapidement et s'arrête à la distance spécifiée entre la position d'attraction et le conteneur dans la direction en bloc.

La direction en bloc est la position par rapport à la ligne existante, la direction dans laquelle la ligne suivante 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 en bloc dépend de la langue d'écriture, par exemple, le mongol place les nouvelles lignes 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 pour définir.

La position d'attraction est la position où l'élément enfant s'attache au conteneur lorsque vous arrêtez de dérouler. Elle est définie.

Remarque :Cette propriété ne fonctionne que dans la direction de bloc scroll-snap-align l'attribut est défini sur 'end'.

Pour voir scroll-padding-block-end l'effet, il est nécessaire de définir scroll-snap-align l'attribut, et définir l'attribut scroll-padding-block-end et scroll-snap-type attribut.

Exemple

Exemple 1

Définir l'espace intérieur de direction de bloc entre la fin du conteneur et la position d'attraction en 20px :

div {
  scroll-padding-block-end: 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-end L'attribut pousse l'image au-dessus de l'élément fixe :

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

Essayez-le vous-même

Exemple 3

Lorsque l'élément conteneur writing-mode Lorsque l'attribut est défini sur vertical-rl, le conteneur et les éléments enfants déplacent la direction de bloc de la fin vers la gauche. Cela affecte le comportement d'attraction en défilement ainsi que scroll-padding-block-end Fonctionnement de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Détails techniques

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.

pages pertinentes

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

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

Référence :Attribut writing-mode CSS