Scrollbar-gutter - Propriété CSS
Résumé des caractéristiques de la propriété scrollbar-gutter
auto
| stable
| stable both-edges
| always
| always both-edges
| stable force
| always force
auto
scrollbar-gutter
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de scrollbar-gutter
.
scrollbar-gutter
.Spécification "CSS Overflow" niveau 3
scrollbar-gutter
.Spécification "CSS Overflow" niveau 4
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 valeurscroll
ou bien si elle est fixée à la valeurauto
et que le contenu déborde de l'élément.Visibilité de la gouttière
avecscrollbar-gutter:auto;
overflow Débord Barre
visibleGouttière
visibleauto NON
OUINON
OUINON
OUIscroll NON
OUIOUI
OUIOUI
OUIvisible NON
OUINON
NONNON
NONhidden NON
OUINON
NONNON
NONclip NON
OUINON
OUINON
NONoverlay NON
OUINON
OUINON
NON - scrollbar-gutter: stable;
L'espace pour la barre de défilement est réservé dès que la propriété
overflow
a la valeurscroll
ouauto
, que le contenu de l'élément déborde ou non.Visibilité de la gouttière
avecscrollbar-gutter:stable;
overflow Débord Barre
visibleGouttière
visibleauto NON
OUINON
OUIOUI
OUIscroll NON
OUIOUI
OUIOUI
OUIvisible NON
OUINON
NONNON
NONhidden NON
OUINON
NONNON
NONclip NON
OUINON
OUINON
NONoverlay NON
OUINON
OUINON
NON - scrollbar-gutter: always; ⚠
La valeur
always
est équivalente à la valeurstable
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 destable
etalways
à presque toutes les valeurs deoverflow
:auto
,scroll
,visible
,hidden
etclip
.Visibilité de la gouttière
avecscrollbar-gutter:stable force;
overflow Débord Barre
visibleGouttière
visibleauto NON
OUINON
OUIOUI
OUIscroll NON
OUIOUI
OUIOUI
OUIvisible NON
OUINON
NONOUI
OUIhidden NON
OUINON
NONOUI
OUIclip NON
OUINON
OUIOUI
OUIoverlay NON
OUINON
OUINON
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.
overflow
du bloc de faux texte a été fixée à auto
, ce qui veut dire que le barre de défilement
vertical ne s'affiche que si le contenu dépasse la hauteur de l'élément. Vous pouvez redimensionner l'élément pour faire apparaître
ou non la barre de défilement, et observer si l'espace qui est réservé à cette dernière disparaît ou pas.
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
.
scrollbar-gutter
pour définir le comportement des barres de défilement.Remarques :
(1) Supporte la stylisation des barres de défilement via un sélecteur : ::-webkit-scrollbar
.
(2) 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.
des barres
scrollbar-gutter
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

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini
Histoire de la propriété scrollbar-gutter
.
-
Module CSS - Débordements - Niveau 3
Première présentation de la propriétéscrollbar-gutter
.18 Avril 2013Document de travail. -
Module CSS - Débordements - Niveau 4
Ajout de nouvelles valeurs pourscollbar-gutter
.13 Juin 2017Document de travail.
Voir aussi, concernant la gestion des débordements et défilements.
Le module de spécification CSS Overflow Module 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.