Scroll-margin - Propriété CSS

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 : Définit les marges du haut de la fenêtre de défilement dans le contexte d'un défilement avec accrochages.
• scroll-margin-right : Définit les marges à droite de la fenêtre de défilement dans le contexte d'un défilement avec accrochages.
• scroll-margin-bottom : Définit les marges en bas de la fenêtre de défilement dans le contexte d'un défilement avec accrochages.
• Scroll-margin-left : Définit les marges en haut de la fenêtre de défilement dans le contexte d'un défilement avec accrochages.

Voyez également les propriétés suivantes :

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 de défilement du haut pour les langues latines.
• scroll-margin-block-end : la marge de défilement du bas pour les langues latines.
• scroll-margin-inline-start : la marge de défilement de gauche pour les langues latines.
• scroll-margin-inline-end : la marge de défilement 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

  Pour modifier une seule des marges, il est possible d'utiliser les propriétés individuelles (scroll-margin-top par exemple).

• 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.

 
 

Accéder à la propriété scroll-margin par programme.

Modifier les marges de défilement avec Javascript.

En Javascript, voici comment modifier les marges de défilement, autrement dit la valeur de scroll-margin. Il y a deux syntaxes, la première en utilisant le tableau des styles et la notation typique de CSS (le nom de la propriété écrit en kebab-case), et la deuxième, avec une notation objet et le nom de la propriété écrit en camel-case.

let el = document.getElementById('id'); el.style['scroll-margin'] = '10mm'; // ou let el = document.getElementById('id'); el.style.scrollMargin = '10mm';

Avec Javascript, lire la valeur de scroll-margin.

Le code ci-dessous récupère la valeur de scroll-margin lorsque celle-ci a été définie dans le code HTML, avec l'attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['scroll-margin']; // ou let el = document.getElementById('id'); let value = el.style.scrollMargin;

Avec Javascript, lire la valeur calculée de scroll-margin.

La valeur calculée est celle soit celle qui est affecte directement à l'élément, via son attribut style ou via un sélecteur CSS, soit celle qui résulte de la cascade des héritages., soit encore, ce sera la valeur initiale de la propriété (0 pour scroll-margin). Dans tous les cas, la valeur calculée est définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('scroll-margin');

Avec JQuery, modifier la valeur de scroll-margin.

JQuery est une libraire qui est moins utilisé maintenant (en particulier à cause des nouvelles fonctionnalités de CSS). Nous donnons cependant les syntaxes pour écrire une valeur dans scroll-margin ou pour relire sa valeur calculée..


$('#id').css('scroll-margin', '10mm');
// ou
$('#id').css('scrollMargin', '10mm');


Avec JQuery, lire la valeur calculée de scroll-margin.

let value = $('#id').css('scroll-margin');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété scroll-margin et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de scroll-margin. On constate en particulier que toutes les unités absolues ou relatives sont converties en pixels.

Compatibilité des navigateurs avec scroll-margin.

La prise en charge de la propriété scroll-margin est correcte sur tous les navigateurs actuels.

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

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

  Ce module de spécification définit les fonctionnalités concernant les défilements avec positions d'accrochage. Autrement dit les défilements calés par le contenu, pour éviter par exemple qu'une image se retrouve coupée en haut ou en bas de son conteneur.

  Concernant scroll-margin. 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 Module CSS - Défilement avec accrochages. La propriété scroll-margin et toutes celles qui se rapporte au sujet sont également présentes dans ce module :

Propriétés :