Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Sichtbarkeit der Bildlaufleiste unter macOS für Trackpad-Benutzer in WebKit-/Blink-Browsern sicherstellen?

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

DDD
DDDOriginal
2024-12-09 04:00:11967Durchsuche

How Can I Ensure Scroll Bar Visibility on macOS for Trackpad Users in WebKit/Blink Browsers?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn