Comment puis-je rendre les barres de défilement toujours visibles pour les utilisateurs du trackpad dans WebKit/Blink ?

Surmonter les barres de défilement cachées pour les utilisateurs de trackpad dans WebKit/Blink

Le comportement par défaut d'UIKit/Blink masque les barres de défilement pour les utilisateurs de trackpad sur MacOS, ce qui peut potentiellement gêner l'utilisateur interaction. Pour résoudre ce problème et garantir une visibilité cohérente de la barre de défilement, suivez ces étapes :

1. Désactiver le comportement de la barre de défilement par défaut :

Désactivez l'apparence de la barre de défilement par défaut de WebKit à l'aide de -webkit-apparence : aucun ; Propriété CSS sur le pseudo-élément ::-webkit-scrollbar.

2. Définir un style de barre de défilement personnalisé :

Le style par défaut étant supprimé, vous devez définir le vôtre. Le CSS suivant recrée l'apparence des barres de défilement masquées :

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

3. Appliquer un style aux éléments à défilement :

Appliquez le CSS personnalisé aux éléments à défilement, en garantissant que les barres de défilement sont toujours visibles, quelle que soit l'utilisation du trackpad. Cela offre une expérience utilisateur cohérente et élimine toute confusion potentielle.

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!