Scrollbar-width - Propriété CSS

scrollbar-width

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

Description rapide
Définit le style (et la taille) des barres de défilement.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | thin | none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété scrollbar-width passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Stylisation des barres de défilement
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de scrollbar-width.

scrollbar-width - Syntax DiagramSyntax diagram of the scrollbar-width CSS property. auto auto thin thin none nonescrollbar-width:;scrollbar-width:;
Schéma syntaxique de la propriété scrollbar-width.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété scrollbar-width.

scrollbar-width définit la largeur des barres de défilement. En fait, et à moins que la norme évolue, il s'agit plutôt de définir le style des barres de défilement : il n'est pas possible de spécifier une valeur numérique, scrollbar-width n'accepte que des valeurs prédéfinies qui définissent aussi bien la largeur que l'aspect des barres de défilement.

Valeurs pour scrollbar-width.

  • scrollbar-width: auto;

    Affichage des barres de défilement habituelles, comportant deux flèches et un curseur.

    La largeur et sa hauteur de cet élément sont fixées, et le contenu déborde de la place impartie aussi bien en largeur que en hauteur.
    Compte-tenu de la valeur de la propriété overflow, fixée à auto, il est possible de faire défiler le contenu pour afficher la partie cachée.
    scrollbar-width:auto;
  • scrollbar-width: thin;

    Affichage de barres de défilement plus étroites, et ne comportant pas de flèches : on peut faire défiler le contenu seulement en agissant sur le curseur.

    La largeur et sa hauteur de cet élément sont fixées, et le contenu déborde de la place impartie aussi bien en largeur que en hauteur.
    Compte-tenu de la valeur de la propriété overflow, fixée à auto, il est possible de faire défiler le contenu pour afficher la partie cachée.
    scrollbar-width:thin;
  • scrollbar-width: none;

    Les barres de défilement ne sont pas affichées, mais sur un écran tactile, le défilement du contenu reste possible. Sur un ordinateur de bureau, il est possible également de faire défiler le contenu de l'élément avec la molette de la souris :

    • Molette seule : défilement vertical.
    • Molette avec touche SHIFT enfoncée : défilement horizontal.
    La largeur et sa hauteur de cet élément sont fixées, et le contenu déborde de la place impartie aussi bien en largeur que en hauteur.
    Compte-tenu de la valeur de la propriété overflow, fixée à auto, il est possible de faire défiler le contenu pour afficher la partie cachée.
    scrollbar-width:none;
  • scrollbar-width: initial; (auto) scrollbar-width: inherit; scrollbar-width: revert; scrollbar-width: revertLayer; scrollbar-width: unset;

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

Exemple d'animation de scrollbar-width.

Un exemple d'animation de la propriété scrollbar-width est donné ci-dessous. Il a le mérite de montrer les différents types de barres de défilement existants (à condition que votre navigateur traite scrollbar-width).

Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.

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

scrollbar-width :
Exemple pour scrollbar-width

Compatibilité des navigateurs avec scrollbar-width.

La stylisation des barres de défilement est maintenant correctement traitée par la plupart des navigateurs.

Colonne 1
Prise en charge par les navigateurs de la personnalisation des barres de défilement.
Colonne 2
Prise en charge par les navigateurs de la propriété scrollbar-width qui gère l'épaisseur 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-width
Estimation de la prise en charge globale.
73%
85%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

2

UC Browser pour Androïd

1

Opéra Mobile

1

QQ Browser

1

Baidu Browser

1

Samsung Internet

Firefox

Safari

1

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

1

KaiOS Browser

Opéra mini

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

Histoire de la propriété scrollbar-width.

c

Voir aussi, dans le même module que scrollbar-width.

Le module de spécification qui traite de scrollbar-width s'appelle CSS Scrollbars Styling Module, il traite de tout ce qui concernent la stylisation des barres d'outils.

Propriétés :

scrollbar-color
Définit deux couleurs qui seront utilisées pour les barres de défilement.