web-dev-qa-db-fra.com

Style de barre de défilement CSS3 sur une div

Comment puis-je styler des barres de défilement webkit avec CSS3?

Je veux dire ces propriétés

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

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

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

Voici mon tag div

<div class="scroll"></div>

Voici mon CSS actuel

.scroll {
   width: 200px; height: 400px;
   overflow: hidden;
}
htmlcsscss3scrollbar
30
2619

Réglage overflow: hidden masque la barre de défilement. Ensemble overflow: scroll pour vous assurer que la barre de défilement apparaît tout le temps.

Pour utiliser le ::webkit-scrollbar propriété, ciblez simplement .scroll avant de l'appeler.

.scroll {
   width: 200px;
   height: 400px;
    background: red;
   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

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

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
​

Voir ce live exemple

71
jacktheripper
.scroll {
   width: 200px; height: 400px;
   overflow: auto;
}
0
Meisam Mulla

Le problème avec les barres de défilement CSS3 est que, l'interaction ne peut être effectuée que sur le contenu. nous ne pouvons pas interagir avec la barre de défilement sur les appareils tactiles.

0
user2845300

Vous définissez overflow: hidden. Cela cachera tout ce qui est trop gros pour le <div>, ce qui signifie que les barres de défilement ne seront pas affichées. Donne ton <div> une largeur et/ou une hauteur explicites, et remplacez overflow par auto:

.scroll {
   width: 200px;
   height: 400px;
   overflow: scroll;
}

Si vous souhaitez uniquement afficher une barre de défilement si le contenu est plus long que le <div>, changez overflow en overflow: auto. Vous pouvez aussi n’afficher qu’une barre de défilement en utilisant overflow-y ou overflow-x.

0
Bojangles