Scrollbar-width - Propriété CSS
Résumé des caractéristiques de la propriété scrollbar-width
auto | thin | noneautoscrollbar-width passe d'une valeur à l'autre sans transition.Schéma syntaxique de scrollbar-width.
scrollbar-widthLes liens du schéma donnent accès à des exemples
Description de la propriété scrollbar-width.
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;
Valeurs globales
(communes à toutes les propriétés)
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.
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).
Simulateur.
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.
scrollbar-width.
des barres
scrollbar-widthNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
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.