Attribut scroll-padding CSS

Définition et utilisation

scroll-padding Cet attribut spécifie la distance entre le conteneur et la position d'adhérence de l'élément fils.

Cela signifie que lorsque vous arrêtez de défilement, le défilement s'ajuste rapidement et s'arrête à une distance spécifiée par rapport à la position d'adhérence de l'élément fils par rapport au conteneur.

La position d'adhérence est la position où l'élément fils est fixé dans le conteneur lorsque le défilement cesse.

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

scroll-padding Les valeurs de l'attribut peuvent être définies de différentes manières :

Si l'attribut scroll-padding a quatre valeurs :

scroll-padding: 15px 30px 60px 90px;
  • La distance du haut est de 15px
  • La distance de droite est de 30px
  • La distance du bas est de 60px
  • La distance de gauche est de 90px

Si l'attribut scroll-padding a trois valeurs :

scroll-padding: 15px 30px 60px;
  • La distance du haut est de 15px
  • La distance de gauche et de droite est de 30px
  • La distance du bas est de 60px

Si l'attribut scroll-padding a deux valeurs :

scroll-padding: 15px 30px;
  • La distance entre le haut et le bas est de 15px
  • La distance de gauche et de droite est de 30px

Si l'attribut scroll-padding a une valeur :

scroll-padding: 10px;
  • Les distances de toutes les quatre directions sont de 10px

pour voir scroll-padding proprietà sull'elemento padre, l'effetto deve essere impostato sull'elemento figlio scroll-snap-align proprietà, e impostare scroll-padding et scroll-snap-type propriété.

Attention :Dans l'exemple suivant, la marge interne de défilement est définie pour toutes les côtés, mais en raison de scroll-snap-align Défini comme "start", donc seul la marge interne de la bord supérieur change le comportement de défilement.

Instance

Exemple 1

Définir la marge interne de défilement de 20px à partir du conteneur à la position d'adhérence :

div {
  scroll-padding: 20px;
}

Essayez-le vous-même

Exemple 2 : Galerie d'images

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

#container {
  scroll-padding: 30px 0 0 0;
}
Élément en haut fixe
Beijing Dancer Wuhan Tulipe Hangzhou

Essayez-le vous-même

Exemple 3 : Définir la marge interne de défilement en bas et à droite

scroll-padding L'attribut peut être configuré en bas et à droite du conteneur en même temps. Défilez horizontalement et verticalement pour voir l'effet :

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





Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Valeur par défaut. Le navigateur calcule la marge interne.
length

Spécifiez la marge interne de défilement en unités telles que px, pt, cm, etc.

Les valeurs négatives ne sont pas autorisées. Voir :Unités CSS.
% Définit la marge interne en pourcentage par rapport à la largeur de l'élément conteneur.
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 : auto
Héritabilité : Non
Réalisation de l'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.scrollPadding="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 Opera
69.0 79.0 68.0 14.1 56.0

Pages associées

Référence :Attribut scroll-padding-bottom CSS

Référence :Attribut scroll-padding-left CSS

Référence :Attribut scroll-padding-right CSS

Référence :Attribut scroll-padding-top CSS

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

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