62 votes

Comment augmenter la largeur d'une barre de défilement en utilisant CSS ?

Est-il possible d'augmenter la largeur d'une barre de défilement sur un <div> placé à l'intérieur du <body> ?

Je ne parle pas de la barre de défilement par défaut sur le navigateur lui -même, cette page s'exécute en mode plein écran et comme la barre de défilement du navigateur n'entre jamais dans l'image, l' <div> a sa propre barre de défilement.

14voto

Vous pouvez créer une barre d'outils spécifique pour div

 div::-webkit-scrollbar {
width: 12px;
}

div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

voir la démo sur jsfiddle.net

5voto

CharlesO Points 425

Cela définit la largeur de la barre de défilement :

 ::-webkit-scrollbar {
  width: 8px;   // for vertical scroll bar
  height: 8px;  // for horizontal scroll bar
}

// for Firefox add this class as well
.thin_scroll{
  scrollbar-width: thin; // auto | thin | none | <length>;
}

0voto

Quentin Points 325526

Oui.

Si la barre de défilement n'est pas la barre de défilement du navigateur, elle sera constituée d'éléments HTML normaux (probablement div s et span s) et pourra donc être stylisée (ou sera Flash, Java , etc et peut être personnalisé selon ces environnements).

Les spécificités dépendent de la structure DOM utilisée.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X