scroll-padding-inline

La propriété scroll-padding-inline est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir scroll-padding-inline-end et scroll-padding-inline-start.

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (scrollport). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

Syntaxe

/* Valeurs avec un mot-clé */
scroll-padding-inline: auto;

/* Valeurs de longueur */
/* Type <length> */
scroll-padding-inline: 10px;
scroll-padding-inline: 1em .5em;
scroll-padding-inline: 10%;

/* Valeurs globales */
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: unset;

Valeurs

<length-percentage>
Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.
auto
Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à 0px mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

Syntaxe formelle

[ auto | <length-percentage> ]{1,2}


<length-percentage> = <length> | <percentage>

Specifications

Spécification État Commentaires
CSS Scroll Snap Module Level 1
La définition de 'scroll-padding-inline' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialeauto
Applicabilitéconteneurs d'ascenseurs
Héritéenon
Pourcentagesrelative to the scroll container's scrollport
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationby computed value type
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
scroll-padding-inlineChrome Support complet 69Edge Aucun support NonFirefox Support complet 68IE Aucun support NonOpera Support complet 56Safari Aucun support NonWebView Android Support complet 69Chrome Android Support complet 69Firefox Android Support complet 68Opera Android Support complet 48Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,