CSS - Débordement: Défilement; - Toujours afficher la barre de défilement verticale?

Question

Donc actuellement, j'ai:

#div
{
position: relative;
height: 510px;
overflow-y: scroll;
}

Cependant, je ne pense pas qu'il sera évident pour certains utilisateurs qu'il y a plus de contenu. Ils pourraient défiler en bas de la page sans savoir que ma div contient en fait beaucoup plus de contenu. J'utilise la hauteur 510px de sorte qu'il coupe un peu de texte, donc sur certaines pages, il ne ressemble qu'il n'y a plus de contenu, mais cela ne fonctionne pas pour tous.

J'utilise un Mac, et en Chrome et Safari, la barre de défilement verticale affiche uniquement lorsque la souris est au-dessus de la Div et vous activement de défilement. Est-il un moyen de l'avoir toujours de l'affichage?

Merci!

Answer 1

J'ai juste rencontré ce problème moi-même. OSx Lion masque les barres de défilement lorsqu'il n'est pas utilisé pour donner l'impression qu'il est plus "lisse", mais en même temps le problème que vous avez abordé se pose: les gens ne peuvent parfois pas voir si une div a une fonctionnalité de défilement ou non.

Le correctif: Dans votre css comprennent -

 ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
 

personnaliser l'apparence au besoin. La source

Answer 2

Cela fonctionnera avec iPad sur Safari sur iOS 7.1.x à partir de mes tests, mais je ne suis pas sûr pour iOS 6. Cependant, cela ne fonctionnera pas sur Firefox. Il existe un plugin jQuery qui vise à être compatible avec tous les navigateurs, appelé jScrollPane .

En outre, il y a un message en double ici sur Stack Overflow qui contient d'autres détails.

Answer 3

Ajouter ceci à votre fichier css rendra également la barre latérale du navigateur visible à tout moment, ce qui peut être dommageable, en particulier pour les dispositions réactives:

 ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
 

Si vous souhaitez que la barre latérale ne soit visible que sur certains éléments, veillez à ajouter la classe ou l'id de l'élément avant:

 .example-div::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.example-div::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}