Scrollbar-gutter - Propriété CSS

scrollbar-gutter

Résumé des caractéristiques de la propriété scrollbar-gutter

Description rapide
Réserve ou non la gouttière pour une barre de défilement.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | stable | stable both-edges | always | always both-edges | stable force | always force
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété scrollbar-gutter passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Débordements
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: WD (document de travail)

Schéma de la syntaxe de scrollbar-gutter.

scrollbar-gutter - Syntax DiagramSyntax diagram of the scrollbar-gutter CSS property. auto auto stable stable both-edges both-edgesscrollbar-gutter:;scrollbar-gutter:;
Schéma syntaxique de la propriété scrollbar-gutter.
Spécification "CSS Overflow" niveau 3
scrollbar-gutter - Syntax DiagramSyntax diagram of the scrollbar-gutter CSS property. auto auto stable stable always always both-edges both-edges force force match-parent match-parentscrollbar-gutter:;scrollbar-gutter:;
Schéma syntaxique de la propriété 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.

Barre de défilement recouvrante de Opéra

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.

scrollbar-gutter :
La propriété 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.

Colonne 1
Prise en charge par les navigateurs de la personnalisation des barres de défilement.
Colonne 2
Support par les navigateurs de la propriété 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.

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

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.

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.

Propriétés :

block-ellipsis
Gère l'affichage d'une marque de suite à la fin d'un élément lorsque le contenu déborde de ce dernier.
overflow
Gestion des débordements, lorsque le contenu est trop grand pour les dimensions imposées à l'élément.
overflow-block
Gestion des débordements dans la direction secondaire.
overflow-clip-margin
Définit la marge de débordement, lorsque le contenu est plus grand que l'élément.
overflow-inline
Gestion des débordements dans la direction principale.
overflow-x
Gestion du débordement dans le sens horizontal.
overflow-y
Gestion du débordement dans le sens vertical.
scroll-behavior
Choisit entre un défilement brutal ou progressif de la page.
text-overflow
Définit l'indicateur de débordement du texte.