it-swarm.com.de

CSS - Overflow: Scroll; - Immer vertikale Bildlaufleiste anzeigen?

Zur Zeit 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 Inhalt vorhanden ist. Sie könnten die Seite runterscrollen, 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 für alle.

Ich benutze 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?

201
Jambo

Bin gerade auf dieses Problem gestoßen. OSx Lion blendet Bildlaufleisten aus, wenn sie nicht verwendet werden, um sie "schlauer" erscheinen zu lassen. Gleichzeitig tritt jedoch das Problem auf, das Sie angesprochen haben: Manchmal können Benutzer nicht erkennen, ob ein Div über eine Bildlauffunktion verfügt oder nicht.

Das Update: In Ihrem CSS enthalten -

@media(device-width: 768px) and (device-height: 1024px){
    ::-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);
    }
}

passen Sie das Erscheinungsbild nach Bedarf an. Quelle

343
NoviceCoding

Bitte beachten Sie, dass die NoviceCoding-Lösung auf dem iPad Safari nicht funktioniert, wenn Sie - webkit-overflow-scrolling: touch; Irgendwo in Ihrem CSS haben. Die Lösung besteht darin, entweder alle Vorkommen von -webkit-overflow-scrolling: touch; Zu entfernen oder -webkit-overflow-scrolling: auto; Mit der NoviceCoding-Lösung zu setzen.

12
Razan Paul

Dies funktioniert mit dem iPad auf Safari unter iOS 7.1.x nach meinen Tests. Ich bin mir jedoch nicht sicher, ob es sich um iOS 6 handelt. Unter Firefox funktioniert es jedoch nicht. Es gibt ein jQuery-Plugin mit dem Namen jScrollPane , das browserkompatibel sein soll.

Es gibt auch ein doppelter Post hier auf Stack Overflow , das einige andere Details enthält.

1
JStarcher