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

Schéma de la syntaxe de scroll-margin.

Description de la propriété scroll-margin.

La propriété scroll-margin est utilisable dans le contexte d'un défilement avec accrochages (Scroll Snap). Elle définit les marges autour des éléments d'accrochage. Reportez-vous à nos explications plus générales sur les défilements avec accrochages. La propriété s'applique aux éléments qui sont définis comme accrochages.

Ne confondez pas avec les marges classiques (voir margin) : celles-ci s'appliquent entre les éléments successifs. Tandis que les marges de défilement sont positionnées entre un élément et le bord du conteneur défilant.

Les exemples ci-dessous illustrent l'effet de la propriété scroll-margin. Ce sont deux conteneurs défilant avec accrochages. En faisant défiler les contenus vous constaterez que, en effet, le défilement s'arrête toujours sur une image positionnée en haut du conteneur. Dans le premier exemple, aucune marge de défilement n'a été définie : les images sont collées au début du conteneur, sans aucun espace, ce qui n'est pas très esthétique. Dans le deuxième exemple une marge de défilement est présente.

 
 

Pas de marges de défilement

 
 

Avec des marges de défilement

La propriété scroll-margin est une propriété résumée. Il est possible de définir individuellement chacune des marges avec les quatre propriétés ci-dessous. Ces propriétés sont dites "physiques" car elles sont indépendantes du mode d'écriture.

• scroll-margin-top : marge d'accrochage du haut.
• scroll-margin-right : marge d'accrochage de droite.
• scroll-margin-bottom : marge d'accrochage du bas.
• scroll-margin-left : marge d'accrochage 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, qui s'adaptent au mode d'écriture :

• scroll-margin-block-start : correspond à la marge d'accrochage du haut pour les langues latines.
• scroll-margin-block-end : la marge d'accrochage du bas pour les langues latines.
• scroll-margin-inline-start : la marge d'accrochage de gauche pour les langues latines.
• scroll-margin-inline-end : la marge d'accrochage de droite pour les langues latines.
• scroll-margin-block : propriété résumée, définit les marges de début de bloc et de fin de bloc.
• scroll-margin-inline : propriété résumée, définit les marges de début de ligne et de fin de ligne.

Valeurs pour scroll-margin.

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

  Toutes les valeurs doivent être suivies d'une des unités de dimension. Les pourcentages ne sont pas autorisés. Quatre valeurs sont acceptées mais il est possible de ne pas les spécifier toutes. 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.
  • 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-margin: initial; (0) scroll-margin: inherit; scroll-margin: revert; scroll-margin: revertLayer; scroll-margin: unset;

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

Exemple d'animation de scroll-margin.

La propriété scroll-margin peut être animée, mais il semblerait que les navigateurs aient du mal à réaliser cet exploit : sur Firefox   l'animation ne se fait pas du tout ; sur Edge   et Chrome  , elle se fait de façon brutale, contrairement à ce que prévoit la spécification du W3C.

Visuellement, l'animation de scroll-margin fait varier le décalage entre le contenu et le conteneur défilant. Ce décalage est visible même en l'absence d'action de l'utilisateur pour faire défiler le contenu.

 
 

Compatibilité des navigateurs avec scroll-margin.

Remarques :

(1) Support partiel du défilement avec accrochage.

1

Défilement avec
accrochages

2

Propriété
scroll-margin

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

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

Caniuse

Histoire de la propriété scroll-margin.

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

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

  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-margin et toutes celles qui se rapporte au sujet sont également présentes dans ce module :

Propriétés :