CSS - Überlauf: Scrollen; - Immer vertikale Bildlaufleiste anzeigen?

Also momentan habe ich:

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

Ich glaube jedoch nicht, dass es für einige Benutzer offensichtlich sein wird, dass dort mehr Inhalte vorhanden sind. Sie könnten die Seite nach unten scrollen, ohne zu wissen, dass mein Div tatsächlich viel mehr Inhalt enthält. Ich verwende die Höhe 510px, damit Text abgeschnitten wird. Auf einigen Seiten sieht es so aus, als gäbe es mehr Inhalt, aber das funktioniert nicht bei allen.

Ich verwende einen Mac und in Chrome und Safari wird die vertikale Bildlaufleiste nur angezeigt, wenn sich die Maus über dem Div befindet und Sie aktiv scrollen. Gibt es eine Möglichkeit, es immer anzuzeigen?

Ich bin gerade selbst auf dieses Problem gestoßen. OSx Lion blendet Bildlaufleisten aus, wenn sie nicht verwendet werden, damit sie "schicker" wirken. Gleichzeitig tritt jedoch das von Ihnen angesprochene Problem auf: Manchmal können Benutzer nicht sehen, ob ein Div über eine Bildlauffunktion verfügt oder nicht.

Das Update: In Ihrem CSS enthalten -

::-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>

Passen Sie das Erscheinungsbild nach Bedarf an. Quelle

Bitte beachten Sie, dass auf iPad Safari die NoviceCoding-Lösung nicht funktioniert, wenn Sie sie haben - webkit-overflow-scrolling: touch;irgendwo in Ihrem CSS. Die Lösung entfernt entweder alle Vorkommen der NoviceCoding-Lösung -webkit-overflow-scrolling: touch;oder setzt -webkit-overflow-scrolling: auto;sie ein.

Dies funktioniert mit dem iPad auf Safari unter iOS 7.1.x aus meinen Tests, ich bin mir jedoch nicht sicher über iOS 6. Unter Firefox funktioniert dies jedoch nicht. Es gibt ein jQuery-Plugin namens jScrollPane , das browserübergreifend kompatibel sein soll .

Außerdem gibt es hier auf Stack Overflow einen doppelten Beitrag, der einige andere Details enthält.

Dadurch werden die Bildlaufleisten immer angezeigt, wenn Inhalte in Fenstern gescrollt werden müssen, um darauf zugreifen zu können. Dies gilt für alle Fenster und alle Apps auf dem Mac:

Starten Sie die Systemeinstellungen über das  Apple-Menü. Klicken Sie auf das Einstellungsfeld „Allgemein“. Suchen Sie nach „Bildlaufleisten anzeigen“ und wählen Sie die Radiobox neben „Immer“ aus. Schließen Sie die Systemeinstellungen, wenn Sie fertig sind