Wie kann ich die Sichtbarkeit der Bildlaufleiste unter macOS für Trackpad-Benutzer in WebKit-/Blink-Browsern sicherstellen?

Sicherstellen der Sichtbarkeit der Bildlaufleiste für MacOS-Trackpad-Benutzer in WebKit/Blink

Bildlaufleisten in WebKit/Blink-Browsern wie Safari und Chrome unter MacOS haben seit OS X Lion (10.7) ein eigenartiges Verhalten erfahren. Bei Verwendung eines Trackpads werden Bildlaufleisten automatisch ausgeblendet, bis der Cursor des Benutzers über dem scrollbaren Bereich schwebt. Auch wenn es minimalistisch erscheinen mag, kann dieses Verhalten zu Verwirrung führen, insbesondere wenn die Bildlaufleiste als einziger Indikator für ein scrollbares Element dient.

Lösung: Nutzung der Pseudoelemente von WebKit

Um dieses Problem zu beheben und zu erzwingen, dass Bildlaufleisten sichtbar bleiben, können wir ihr Erscheinungsbild über die Pseudoelemente -webkit-scrollbar von WebKit manipulieren. Indem wir das Standard-Erscheinungsbild und -Verhalten mit -webkit-appearance: none deaktivieren, können wir den Stil der Bildlaufleiste steuern und ihre Sichtbarkeit sicherstellen:

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

Da wir jedoch den Standardstil überschreiben, können wir Außerdem müssen wir das Erscheinungsbild der Bildlaufleiste selbst definieren. Das folgende CSS stellt die halbtransparenten, ausblendenden Bildlaufleisten wieder her:

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

Mit diesen Änderungen bleiben Bildlaufleisten auf scrollbaren Elementen unter MacOS sichtbar, unabhängig von der Trackpad-Nutzung oder der Cursorposition, was für mehr Klarheit und Benutzerfreundlichkeit sorgt Navigation für Benutzer.

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeit der Bildlaufleiste unter macOS für Trackpad-Benutzer in WebKit-/Blink-Browsern sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!