Comment puis-je empêcher les barres de défilement de disparaître sur les trackpads macOS dans les navigateurs WebKit/Blink ?

Prévenir la disparition de la barre de défilement pour les utilisateurs de trackpad dans WebKit/Blink

Le comportement par défaut des navigateurs WebKit/Blink de macOS (Safari/Chrome) consiste depuis longtemps à masquer automatiquement les barres de défilement aux utilisateurs interagir avec les trackpads sur les versions supérieures à 10.7 (Mac OS X Lion). Ce comportement peut être particulièrement problématique car il supprime un repère visuel commun indiquant la possibilité de défilement d'un élément.

Énoncé du problème

La difficulté survient pour garantir une barre de défilement toujours visible pour les éléments déroulants dans les navigateurs basés sur WebKit sur macOS.

Solution

WebKit fournit un puissant système de pseudo-éléments, permettant une manipulation étendue des barres de défilement grâce à l'utilisation de pseudo-éléments -webkit-scrollbar. Pour conserver les barres de défilement visibles à tout moment :

1. Désactiver l'apparence par défaut : Utilisez la propriété -webkit-apparence et définissez-la sur none pour remplacer le comportement de masquage automatique.
2. Style personnalisé : Définissez manuellement des préférences de style spécifiques pour la barre de défilement, car la suppression de l'apparence par défaut peut conduire à des barres de défilement invisibles. Pensez à spécifier les propriétés suivantes :

• -webkit-scrollbar-track : Couleur d'arrière-plan et rayon de bordure
• -webkit-scrollbar- thumb : Bordure, couleur d'arrière-plan, bordure radius
• -webkit-scrollbar-width et -webkit-scrollbar-height : Dimensions des barres de défilement horizontales et verticales respectivement

Exemple

Le CSS suivant montre comment recréer la barre de défilement qui disparaît apparence :

.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; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

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

Démonstration visuelle

Notes supplémentaires

• Cette solution est spécifique aux navigateurs basés sur WebKit sur macOS.
• Le CSS fourni sert d'exemple et peut être adapté pour correspondre à l'apparence souhaitée.

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!