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

224

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?

Jambo
quelle
4
Ähm, können Sie genau dieses Verhalten auf jsfiddle nachstellen ? Das von Ihnen bereitgestellte CSS sollte die ständige Anzeige einer Bildlaufleiste erzwingen.
SG3s
1
Ja, hört sich so an, als hätten Sie einige andere CSS-Macken, die dazu führen, dass die Bildlaufleiste immer angezeigt wird. Stellen Sie sicher, dass die Verpackung des Divs richtig gestylt ist.
Shawn Steward
Ich leite Lion! Vielleicht ist es das? Ich werde eine virtuelle Maschine öffnen und sehen, wie es auf der Windows-Seite der Dinge ist ...
Jambo
1
Verdammt, mein Schlechtes! Es ist eine Funktion in Lion. Ich sollte wirklich lesen, was ich kaufe, bevor ich es kaufe ... Danke Jungs!
Jambo

Antworten:

386

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

Passen Sie das Erscheinungsbild nach Bedarf an. Quelle

NoviceCoding
quelle
6
Sollte dies auch auf dem iPad mit Safari funktionieren? Ich bin auf einem iPad 2 mit iOS 6.1.3 und es funktioniert nicht.
Crmpicco
6
Gibt es eine Möglichkeit, dies nur für eine bestimmte Klasse anzuwenden?
Futbolpal
2
Funktionierte nur für mich, nachdem ich für den Container 'overflow: auto' eingestellt hatte (in meinem Fall ein <ul>). Vielen Dank!
Rob Campion
8
@futbolpal ja, das scheint in einer Klasse zu funktionieren; versuchen Sie .classname :: - Webkit-Bildlaufleiste
Chase
4
Wie kann ich das horizontal arbeiten lassen? Balken erscheint für vertikale Schriftrolle, aber nicht horizontale Schriftrolle
BritishSam
14

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.

Razan Paul
quelle
3
Ist es möglich, beides in unserem CSS zu haben - Webkit-Überlauf-Scrollen: Berühren und die Bildlaufleisten?
Julsy
1

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.

JStarcher
quelle
5
Beachten Sie, dass diese Frage vor 2 Jahren gestellt wurde, bevor es iOS6 überhaupt gab.
OGHaza
Das Webkit ist nur Safari Chrome. Sie müssen auf die Firefox-spezifische Engine
abzielen
-4

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

Michelle
quelle
18
Dies beantwortet zwar die Frage, aber es handelt sich eher um eine clientseitige Korrektur als um eine serverseitige Korrektur. Es ist also etwas, was der Webseitenbenutzer tun muss. Stackoverflow ist eine Programmierseite, daher kommen die Leute normalerweise hierher, um die Codelösung zu finden, anstatt dem Benutzer die Möglichkeit zu geben, ihre Browsereinstellungen zu ändern.
Eric Leschinski