Propriété CSS scrollbar

❮ Précédent Suivant ❯

L'ensemble des propriétés CSS scrollbar est un crochet de style propriétaire qui permet aux concepteurs de créer des thèmes personnalisés pour les barres de défilement natives du navigateur.

Maintenant, elle est exposée derrière le préfixe de vendeur -webkit.

L'ensemble des propriétés -webkit-scrollbar se compose de sept pseudo-éléments différents qui, ensemble, constituent un élément d'interface utilisateur de barre de défilement complète. Ces sept pseudo-éléments sont les suivants:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

Valeur initiale	auto
Appliquée à	Boîtes de défilement.
Héritée	Oui.
Animable	Discrète.
Version	-
Syntaxe DOM	-

Syntaxe

scrollbar: ::-webkit-scrollbar-button | ::-webkit-scrollbar-track | ::-webkit-scrollbar-track-piece | ::-webkit-scrollbar-thumb | ::-webkit-scrollbar-corner | ::-webkit-resizer

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      html {
      height: 100%;
      overflow: hidden;
      }
      body {
      height: 100%;
      background: #eee;
      overflow: scroll;
      width: 85%;
      max-width: 600px;
      margin: 0 auto;
      padding: 3em;
      font: 100%/1.4 lora, serif;
      border: 1px solid #666;
      }
      p {
      margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
      width: 1em;
      } 
      body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      }
      body::-webkit-scrollbar-thumb {
      background-color: #666;
      outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété scrollbar</h2>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    <div>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
::-webkit-scrollbar-button	Les boutons sur la barre de défilement.
::-webkit-scrollbar-track	La poignée de défilement déplaçable.
::-webkit-scrollbar-track-piece	La piste de la barre de défilement.
::-webkit-scrollbar-thumb	La partie de la piste non recouverte par la poignée.
::-webkit-scrollbar-corner	Le coin inférieur de la barre de défilement, où les barres de défilement horizontale et verticale se rencontrent.
::-webkit-resizer	La poignée de redimensionnement déplaçable qui apparaît dans le coin inférieur de certains éléments.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.