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

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?

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);
}

/* always show scrollbars */

::-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);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

personnaliser l'apparence au besoin. La source

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.

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.

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é