Scroll-padding et propriétés dérivées.

scroll-padding

Résumé des caractéristiques de la propriété `scroll-padding`

Description rapide

Définit les marges intérieures de la fenêtre de défilement.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto

Pourcentages

calculés par rapport à la dimension correspondante de la fenêtre de défilement.

Valeur initiale

auto

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété scroll-padding passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Défilement avec accrochages

Références (W3C)

CSS Scroll Snap Module - Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `scroll-padding`.

Schéma syntaxique de la propriété scroll-padding
Les liens du schéma donnent accès à plus de détails

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.

Remarque : ce problème n'apparaît que dans le cas d'un défilement page par page, avec les touches ⇟ et ⇞ du clavier. Les défilements avec la souris, la molette de la souris ou le doigt sur un écran tactile ne sont pas concernés.

Barre de menus

Dans cet exemple, une barre de menus et un pied de page ont été positionnés en sticky : ils ne se déplacent pas avec le reste du contenu pour rester toujours visibles par dessus le texte (voir la propriété position). En faisant défiler le contenu avec les touches "Page suivante" ou "Page précédente", vous constaterez qu'il y a, à chaque fois, une ligne ou deux du contenu qui ne sont pas visibles car cachées par la barre de menus ou le pied de page. Ce problème est très gênant pour la lecture d'un long texte car cela interdit l'utilisation des touches du clavier pour faire défiler le texte.

Pied de page

Pas de marges de défilement

Barre de menus

Dans ce deuxième exemple, on retrouve la même barre de menus et le même pied de page, toujours positionnés en sticky : ils ne se déplacent pas avec le reste du contenu (voir la propriété position). Mais une marge de défilement a été fixée : en faisant défiler le contenu avec les touches "Page suivante" ou "Page précédente", vous constaterez que le contenu s'affiche à chaque fois sur la suite du texte, sans que aucune ligne ne soit masquée. La lecture d'un long texte est facilitée car l'utilisation des touches du clavier est de nouveau efficace.
Certains navigateurs reprennent la dernière ligne de la page précédente pour l'afficher à nouveau en haut de la page suivante. correspondant aux éléments positionnés.-->

Pied de page

Des marges défilement ont été fixées avec scroll-padding

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 de défilement

Avec des marges 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.

scroll-padding-top

scroll-padding-left

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

scroll-padding-right

scroll-padding-bottom

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

Valeurs communes à toutes les propriétés :


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.

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Support des propriétés scroll-padding-... pour réserver une marge sur un des côtés du conteneur défilant, par exemple pour laisser de la place pour un élément qui ne défile pas.

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

Historique de la propriété `scroll-padding`.

Module CSS - Défilement avec accrochages - Niveau 1

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 CSS Scroll Snap Module. 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 :

scroll-margin

Définit les marges de défilement dans le contexte d'un défilement avec accrochages (Scroll Snap).

scroll-snap-align

Définit l'alignement des éléments servant d'accrochage par rapport à la fenêtre d'affichage (scroll Snap).

scroll-snap-stop

Permet de forcer l'arrêt d'un défilement sur certains éléments.

scroll-snap-type

Définit les principales caractéristiques d'un défilement avec accrochages (Scroll Snap).