Scroll-padding - Propriété CSS

Schéma de la syntaxe de scroll-padding.

Description de la propriété scroll-padding.

La propriété scroll-padding s'applique à un conteneur défilant. Elle définit les marges intérieures à ce conteneur pour ce qui est du défilement. Autrement dit elle réduit les dimensions de la zone d'affichage. Ceci peut être utile lorsque des éléments sont positionnés (voir la propriété position) car ils s'affichent alors par dessus le reste du contenu et en masquent une partie.

Voici un exemple. Une zone de défilement qui comporte une partie fixe en haut (menu) et en bas (pied de page). Ces deux éléments ont une propriété position fixée à sticky : ils ne défilent donc pas avec le texte et sont par dessus celui-ci. Dans le premier exemple, sur la gauche, on voit qu'il y a toujours une ou deux lignes de texte qui n'ont pas été lues et qui sont pourtant cachées par ces bandeaux. Dans l'exemple de droite avec scroll-padding on a résolu le problème.

Autrement dit, les marges de défilement réduisent la taille de la fenêtre de défilement, comme le montrent les schémas ci-dessous. On trouve un mécanisme comparable pour les défilements dans le sens horizontal.

Pas de marges intérieures de défilement

Avec des marges intérieures de défilement
dans le sens vertical

Voyez aussi la propriété scroll-margin et nos explications sur le défilement avec accrochages (Scroll Snap), un mécanisme précis pour gérer les défilements en fonction du contenu : défilements avec accrochages.

La propriété scroll-padding est une propriété résumée pour les quatre propriétés physiques ci-dessous :

• scroll-padding-top : marge de défilement du haut.
• scroll-padding-right : marge de défilement de droite.
• scroll-padding-bottom : marge de défilement du bas.
• scroll-padding-left : marge de défilement de gauche.

Prise en charge du mode d'écriture.

Si le texte n'est pas en langue latine, il est recommandé d'utiliser plutôt les propriétés logiques suivantes, qui s'adaptent au mode d'écriture de la langue utilisée.

• scroll-padding-block-start : correspond à la marge de défilement du haut pour les langues latines.
• scroll-padding-block-end : la marge de défilement du bas pour les langues latines.
• scroll-padding-inline-start : la marge de défilement de gauche pour les langues latines.
• scroll-padding-inline-end : la marge de défilement de droite pour les langues latines.

Ainsi que les deux propriétés résumées scroll-padding-block et scroll-padding-inline qui permettent de définir en une seule écriture les valeurs pour start et pour end.

Valeurs pour scroll-padding.

• scroll-padding: auto;

  Le navigateur est libre de choisir d'appliquer ou non des marges de défilement. Le plus souvent, la valeur auto correspond à une absence de marges de défilement, mais il est envisageable que des navigateurs appliquent automatiquement des marges correspondant aux éléments positionnés susceptibles de masquer cu contenu.

• scroll-padding: 20px; scroll-padding: 20px 10px; scroll-padding: 20px 10px 15px; scroll-padding: 20px 10px 15px 15px;

  De une à quatre valeurs sont acceptées. Elles doivent être suivies d'une des unités de dimension. S'il s'agit de pourcentages, il seront évalués par rapport à la dimension correspondante de la fenêtre de défilement (hauteur ou largeur). Le total des pourcentages dans une direction donnée doit donc être inférieur à 50% sinon plus aucun défilement n'est possible.

  Voici comment sont affectées les valeurs en fonction de leur nombre :

  • Si une seule valeur est précisée, elle s'applique de façon identique aux quatre marges de défilement.
  • Si deux valeurs sont précisées, la première définit les marges haute et basse, et la deuxième valeur définit les marges gauche et droite.
  • Lorsque trois valeurs sont indiquées, elle définissent respectivement la marge du haut, les marges gauche et droite, la marge du bas.
  • Enfin, si les quatre valeurs sont précisées, elles définissent chacune des marges, dans l'ordre suivant : marge du haut, marge de droite, marge du bas, marge de gauche.
  
  Une seule valeur

  
  Deux valeurs

  
  Trois valeurs

  
  Quatre valeurs
• scroll-padding: initial; (auto) scroll-padding: inherit; scroll-padding: revert; scroll-padding: revertLayer; scroll-padding: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de scroll-padding.

L'animation de scroll-padding est possible mais peu spectaculaire. Son effet n'est visible que lorsque qu'on agit sur la barre de défilement. Il n'y a donc pas d'effet continu qui serait visible en permanence.

Exemple interactif avec la propriété scroll-padding.

Dans cet exemple, il n'y a pas de bandeaux fixes. La propriété scroll-padding est utilisée uniquement pour des raisons esthétiques : éviter de coller les éléments au bord du conteneur défilant.

Compatibilité des navigateurs avec scroll-padding.

La propriété scroll-padding est bien reconnue par tous les grands navigateurs.

1

Propriété
scroll-padding

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété scroll-padding.

• Module CSS - Défilement avec accrochages - Niveau 1

  Concernant scroll-padding. Première présentation de la propriété scroll-padding.
  

  26 Mars 2015

  Document de travail.

  

  20 Octobre 2016

  Candidat à la recommandation.

  

  

Voir aussi, à propos des défilements avec accrochages.

Les défilements avec accrochage sont décrits dans le module Module CSS - Défilement avec accrochages. La propriété scroll-padding et ses dérivées, ainsi que toutes celles qui se rapporte au sujet sont également présentes dans ce module.

Propriétés :