Scrollbar-gutter - Propriété CSS

Schéma de la syntaxe de scrollbar-gutter.

Comme on peut le voir sur les deux schémas ci-dessus, la syntaxe de scrollbar-gutter a bien évolué entre les niveaux 3 et 4 de la spécification.

Description de la propriété scrollbar-gutter.

scrollbar-gutter gère l'espace qui peut être réservé pour une barre de défilement éventuelle. Cet espace est généralement appelé la gouttière de défilement (gutter en anglais). Il s'agit bien uniquement de l'espace réservé, l'affichage ou non de la barre de défilement en elle-même dépend de la propriété overflow et du fait que le contenu dépasse la taille de l'élément.

Les propriétés scrollbar-gutter et overflow interagissent beaucoup l'une sur l'autre.

Barres de défilement classiques ou recouvrantes.

Il faut aussi distinguer les barres de défilement classiques et les barres de défilement recouvrantes. Ces dernières ne consomment pas de place et sont en général semi-transparentes pour laisser voir le contenu au travers d'elles. On voit aussi des barres de défilement qui ne s'affichent que lorsque l'utilisateur commence un défilement. Ce type de barre ne consomme pas non plus d'espace sur l'écran. scrollbar-gutter concerne essentiellement les barres de défilement classiques, celles qui nécessitent qu'on leur réserve de la place.

La page d'accueil de Opéra comporte une barre de défilement recouvrante : elle n'interfère pas avec la mise en page. Elle laisse voir le contenu par transparence et est elle même pratiquement invisible jusqu'à ce que la souris s'en approche.

Valeurs pour scrollbar-gutter.

• scrollbar-gutter: auto;

  L'espace pour la barre de défilement est réservé uniquement lorsque celle-ci est présente, c'est à dire si la propriété overflow est fixée à la valeur scroll ou bien si elle est fixée à la valeur auto et que le contenu déborde de l'élément.

  Visibilité de la gouttière avec scrollbar-gutter:auto;
  overflow	Débord	Barre   visible	Gouttière   visible
  auto	NON OUI	NON OUI	NON OUI
  scroll	NON OUI	OUI OUI	OUI OUI
  visible	NON OUI	NON NON	NON NON
  hidden	NON OUI	NON NON	NON NON
  clip	NON OUI	NON OUI	NON NON
  overlay	NON OUI	NON OUI	NON NON

• scrollbar-gutter: stable;

  L'espace pour la barre de défilement est réservé dès que la propriété overflow a la valeur scroll ou auto, que le contenu de l'élément déborde ou non.

  Visibilité de la gouttière avec scrollbar-gutter:stable;
  overflow	Débord	Barre   visible	Gouttière   visible
  auto	NON OUI	NON OUI	OUI OUI
  scroll	NON OUI	OUI OUI	OUI OUI
  visible	NON OUI	NON NON	NON NON
  hidden	NON OUI	NON NON	NON NON
  clip	NON OUI	NON OUI	NON NON
  overlay	NON OUI	NON OUI	NON NON

• scrollbar-gutter: always; ⚠

  La valeur always est équivalente à la valeur stable mais s'applique quelque soit le type de barre de défilement (classique ou recouvrante).

  Cette valeur permet d'obtenir des retours à la ligne rigoureusement identiques quelque soit le type de barre de défilement et quelque soit la longueur du contenu.

• scrollbar-gutter: stable both-edges; scrollbar-gutter: always both-edges;

  Un espace pour une barre de défilement est réservé de façon symétrique à chacune des extrémités des lignes.

• scrollbar-gutter: stable force; scrollbar-gutter: always force;

  La valeur force étend l'effet de stable et always à presque toutes les valeurs de overflow : auto, scroll, visible, hidden et clip.

  Visibilité de la gouttière avec scrollbar-gutter:stable force;
  overflow	Débord	Barre   visible	Gouttière   visible
  auto	NON OUI	NON OUI	OUI OUI
  scroll	NON OUI	OUI OUI	OUI OUI
  visible	NON OUI	NON NON	OUI OUI
  hidden	NON OUI	NON NON	OUI OUI
  clip	NON OUI	NON OUI	OUI OUI
  overlay	NON OUI	NON OUI	NON NON

• scrollbar-gutter: initial; (auto) scrollbar-gutter: inherit; scrollbar-gutter: revert; scrollbar-gutter: revertLayer; scrollbar-gutter: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété scrollbar-gutter.

Le simulateur permet de visualiser l'effet de la propriété scrollbar-gutter, tout au moins pour les valeurs traitées par les navigateurs actuels.

Compatibilité des navigateurs avec scrollbar-gutter.

La propriété scrollbar-gutter est maintenant bien reconnue par l'ensemble des navigateurs, y compris la valeur stable.

Remarques :

(1) Supporte seulement la couleur via une propriété préfixée. Pas de propriétés pour définir l'apparence des barres de défilement.

(2) Supporte la stylisation des barres de défilement via un sélecteur : ::-webkit-scrollbar.

1

Stilisation
des barres

2

Propriété
scrollbar-gutter

Estimation de la prise en charge globale.

73%

89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

2

UC Browser pour Androïd

2

Opéra Mobile

2

QQ Browser

2

Baidu Browser

2

Samsung Internet

Firefox

Safari

2

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

2

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété scrollbar-gutter.

• Module CSS - Débordements - Niveau 3

  Concernant scrollbar-gutter. Première présentation de la propriété scrollbar-gutter.
  

  18 Avril 2013

  Document de travail.

  

  

  

• Module CSS - Débordements - Niveau 4

  Concernant scrollbar-gutter. Ajout de nouvelles valeurs pour scollbar-gutter.
  

  13 Juin 2017

  Document de travail.

  

  

  

Voir aussi, concernant la gestion des débordements et défilements.

Le module de spécification module CSS - Débordements regroupe tout ce qui concerne les débordements et défilements de contenu. La propriété scrollbar-gutter, ainsi que les suivantes, sont décrites dans ce module.

Sélecteurs :

Propriétés :