Propriété CSS scrollbar

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>

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.

Support de Navigateurs

4.0 -webkit- (Partial) 64.0 (Partial) 5.1 -webkit- (Partial) 15.0 -webkit- (Partial)


Trouvez-vous cela utile?

Articles Associées