Comment puis-je garantir la visibilité de la barre de défilement sur macOS pour les utilisateurs de trackpad dans les navigateurs WebKit/Blink ?

Assurer la visibilité de la barre de défilement pour les utilisateurs du trackpad MacOS dans WebKit/Blink

Dans les navigateurs WebKit/Blink comme Safari et Chrome, les barres de défilement sur MacOS ont subi un comportement particulier depuis OS X Lion (10.7). Lors de l'utilisation d'un trackpad, les barres de défilement se masquent automatiquement jusqu'à ce que le curseur de l'utilisateur survole la zone de défilement. Bien que cela puisse sembler minimaliste, ce comportement peut prêter à confusion, en particulier lorsque la barre de défilement sert de seul indicateur d'un élément défilable.

Solution : exploiter les pseudo-éléments de WebKit

Pour remédier à ce problème et forcer les barres de défilement à rester visibles, nous pouvons manipuler leur apparence via -webkit-scrollbar de WebKit pseudo-éléments. En désactivant l'apparence et le comportement par défaut avec -webkit-apparence: none, nous pouvons prendre le contrôle du style de la barre de défilement et assurer sa visibilité :

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

Cependant, puisque nous remplaçons le style par défaut, nous Nous devons également définir nous-mêmes l'apparence de la barre de défilement. Le CSS suivant recrée les barres de défilement masquées semi-transparentes :

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

Avec ces modifications, les barres de défilement sur les éléments défilants resteront visibles sur MacOS, quelle que soit l'utilisation du trackpad ou la position du curseur, offrant une clarté et une facilité d'utilisation accrues. navigation pour les utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!