scroll-margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété scroll-margin est une propriété raccourcie qui permet de définir l'ensemble des propriétés scroll-margin-top, scroll-margin-left, scroll-margin-bottom et scroll-margin-right (de la même façon que la propriété margin définit les différents côtés des marges).

Exemple interactif

Les valeurs de scroll-margin correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (snapport). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

Syntaxe

css
/* Valeur de longueur */
/* Type <length> */
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

/* Valeurs globales */
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: unset;

Valeurs

<length>

Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir <length> pour les valeurs possibles.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationby computed value type

Syntaxe formelle

scroll-margin = 
<length>{1,4}

Spécifications

Specification
CSS Scroll Snap Module Level 1
# scroll-margin

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-margin

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Uses a non-standard name.
Has more compatibility info.