Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Problèmes de compatibilité ⚠
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 proposé pour la recommandation)

Schéma syntaxique 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
Les liens du schéma donnent accès à des exemples

Description de la propriété scrollbar-width.

⚠
Attention ! La propriété scrollbar-width est encore très peu implémentée par les navigateurs.

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.

Syntaxes 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; scrollbar-width: inherit; scrollbar-width: revert; scrollbar-width: revert-layer; scrollbar-width: unset;

    La valeur initiale est : auto.

Animation de la propriété 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.

Simulateur.

scrollbar-width :
Exemple pour scrollbar-width

Prise en charge par les navigateurs (compatibilité).

A l'heure actuelle (2022), cette propriété scrollbar-width, ainsi que les autres fonctionnalités de paramétrage des barres de défilement, sont encore trop peu reconnues par les navigateurs.

Colonne 1
Prise en charge de la stylisation des barres de défilement.
Colonne 2
Support par les navigateurs de la propriété scrollbar-width.
1
Scrollbars styling
2
scrollbar-width
Estimation de la prise en charge en pourcentage du parc actuel.
3%
43%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 121 (2024)
°

Baidu Browser

Version testée : 13.18 (2022)
°

Chrome

Version testée : 121 (2024)

Chrome pour Androïd

Version testée : 121 (2024)
°

Edge

Version testée : 121 (2024)

Firefox

Version testée : 122 (2024)

Firefox pour Androïd

Version testée : 122 (2024)

Internet Explorer

Version testée : 11 (2013)

KaiOS Browser

Version testée : 3

Opéra

Version testée : 106 (2023)
°

Opéra Mobile

Version testée : 73 (2023)
°

QQ Browser

Version testée : 13.1 (2022)
°

Safari

Version testée : 17.3 (2024)
°

Safari sur IOS

Version testée : 17.3 (2024)

Samsung Internet

Version testée : 23 (2023)
°

Oméra mini

Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

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

Les spécifications CSS éditées par le W3C sont organisées en modules. scrollbar-width fait partie du Module CSS - Stylisation des barres de défilement (CSS Scrollbars Styling Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

⚠
Définit deux couleurs qui seront appliquées sur les barres de défilement.