Wie kann ich verhindern, dass Bildlaufleisten auf macOS-Trackpads in WebKit-/Blink-Browsern ausgeblendet werden?

Verhindern der Verdeckung der Bildlaufleiste für macOS Trackpad-Benutzer in WebKit/Blink

In macOS seit Version 10.7 WebKit/Blink-Browser (z. B. Safari , Chrome) verbergen Bildlaufleisten automatisch vor Trackpad-Benutzern, wenn sie nicht verwendet werden. Dieses Verhalten kann wesentliche visuelle Hinweise zur Bestimmung der Scrollbarkeit eines Elements verschleiern.

Standard-WebKit-Verhalten:

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

Presto-Verhalten (z. B. Opera):

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

Lösung: Bildlaufleisten dauerhaft anzeigen

Um zu erzwingen, dass eine Bildlaufleiste in WebKit sichtbar bleibt, ändern Sie ihr Erscheinungsbild mit der -webkit-scrollbar Pseudoelement:

CSS:

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
}

Ergebnis:

Foo<br>
Bar<br>
Baz<br>
Help I'm trapped in an HTML factory!

Indem Sie das standardmäßige Erscheinungsbild der Bildlaufleiste deaktivieren und einen benutzerdefinierten Stil definieren, Wir sorgen dafür, dass die Bildlaufleiste für macOS-Trackpad-Benutzer sichtbar bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Bildlaufleisten auf macOS-Trackpads in WebKit-/Blink-Browsern ausgeblendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!