CSS - Overflow: Scroll; - Toujours afficher la barre de défilement verticale?

224

Donc, actuellement, j'ai:

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

Cependant, je ne pense pas qu'il soit évident pour certains utilisateurs qu'il y a plus de contenu là-bas. Ils pourraient faire défiler la page sans savoir que ma div contient en fait beaucoup plus de contenu. J'utilise la hauteur 510px pour qu'il coupe du texte, donc sur certaines pages, il semble qu'il y ait plus de contenu, mais cela ne fonctionne pas pour tous.

J'utilise un Mac, et dans Chrome et Safari, la barre de défilement verticale ne s'affiche que lorsque la souris survole la Div et que vous faites activement défiler. Existe-t-il un moyen de toujours l'afficher?

Jambo
la source
4
Uhm, pouvez-vous recréer ce comportement exact sur jsfiddle ? Le css que vous avez fourni devrait forcer une barre de défilement à être présente tout le temps.
sg3s
1
Oui, il semble que vous ayez d'autres bizarreries CSS à l'origine de cela, cela devrait toujours afficher la barre de défilement. Assurez-vous que l'emballage de la div est correctement conçu.
Shawn Steward
Je dirige Lion! C'est peut-être ça? Je vais ouvrir une machine virtuelle et voir à quoi ça ressemble du côté des fenêtres ...
Jambo
1
Merde, mon mauvais! C'est une fonctionnalité de Lion. Je devrais vraiment lire ce que j'achète avant de l'acheter ... Merci les gars!
Jambo

Réponses:

386

Je viens de rencontrer ce problème moi-même. OSx Lion masque les barres de défilement lorsqu'il n'est pas utilisé pour le rendre plus "lisse", mais en même temps le problème que vous avez résolu: les gens ne peuvent parfois pas voir si un div a une fonction de défilement ou non.

La solution: dans votre CSS, incluez -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

personnaliser l'apparence au besoin. La source

NoviceCoding
la source
6
Cela devrait-il également fonctionner sur l'iPad avec Safari? Je suis sur un iPad 2 exécutant iOS 6.1.3 et cela ne fonctionne pas.
crmpicco
6
Existe-t-il un moyen de faire en sorte que cela ne s'applique qu'à une classe spécifique?
futbolpal
2
A fonctionné pour moi uniquement après avoir défini 'overflow: auto' sur le conteneur (dans mon cas, un <ul>). Merci!
Rob Campion
8
@futbolpal oui, cela semble fonctionner dans une classe; essayez .classname :: - webkit-scrollbar
Chase
4
comment puis-je faire en sorte que cela fonctionne horizontalement? barre s'affiche pour le défilement vertical mais pas horizontal
BritishSam
14

Veuillez noter que sur iPad Safari, la solution de NoviceCoding ne fonctionnera pas si vous l'avez - webkit-overflow-scrolling: touch;quelque part dans votre CSS. La solution consiste soit à supprimer toutes les occurrences de, -webkit-overflow-scrolling: touch;soit -webkit-overflow-scrolling: auto;à l'intégrer à la solution de NoviceCoding.

Razan Paul
la source
3
Est-il possible d'avoir les deux dans notre css - webkit-overflow-scrolling: touch et les barres de défilement?
Julsy
1

Cela fonctionnera avec iPad sur Safari sur iOS 7.1.x d'après mes tests, je ne suis pas sûr cependant d'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 article en double ici sur Stack Overflow qui contient d'autres détails.

JStarcher
la source
5
Sachez que cette question a été posée il y a 2 ans, avant même que iOS6 n'existe.
OGHaza
webkit est uniquement safari chrome. Vous devrez cibler le moteur spécifique à Firefox
TigerBear
-4

Cela fera que les barres de défilement s'afficheront toujours lorsqu'il y a du contenu dans les fenêtres qui doit être défilé pour y accéder, cela s'applique à toutes les fenêtres et toutes les applications sur le Mac:

Lancez les Préférences Système à partir du menu  Apple Cliquez sur le panneau des paramètres «Général» Recherchez «Afficher les barres de défilement» et sélectionnez la radiobox à côté de «Toujours» Fermer les Préférences Système lorsque vous avez terminé

Michelle
la source
18
Cela répond à la question, en quelque sorte, mais c'est une correction côté client plutôt que de la corriger côté serveur. C'est donc quelque chose que l'utilisateur de la page Web doit faire, stackoverflow est un site de programmation, donc les gens viennent généralement ici pour trouver la solution de code plutôt qu'un moyen pour l'utilisateur de modifier les paramètres de son navigateur.
Eric Leschinski