Maison > interface Web > tutoriel CSS > Comment puis-je empêcher les barres de défilement de disparaître sur le trackpad de mon Mac lors de l'utilisation des navigateurs WebKit/Blink ?

Comment puis-je empêcher les barres de défilement de disparaître sur le trackpad de mon Mac lors de l'utilisation des navigateurs WebKit/Blink ?

Patricia Arquette
Libérer: 2024-12-08 10:26:11
original
247 Les gens l'ont consulté

How Can I Prevent Scroll Bars from Disappearing on My Mac Trackpad When Using WebKit/Blink Browsers?

Empêcher les barres de défilement de disparaître : une solution pour les utilisateurs de trackpad Mac dans WebKit/Blink

Problème :

Les utilisateurs sous macOS avec Mac OS X Lion (10.7) et versions ultérieures peuvent rencontrer des barres de défilement masquées lors de l'utilisation d'un trackpad dans les navigateurs WebKit/Blink (comme Safari et Chrome). Ce comportement peut prêter à confusion, car les barres de défilement fournissent un signal visuel essentiel indiquant qu'un élément peut défiler.

Solution :

Les pseudo-éléments -webkit-scrollbar de WebKit sont activés. contrôle de l'apparence de la barre de défilement. En personnalisant ces éléments, nous pouvons empêcher le comportement par défaut et forcer les barres de défilement à s'afficher en continu.

Style CSS :

Désactiver l'apparence et le comportement par défaut :

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}
Copier après la connexion

Recréez l'apparence du parchemin visible bars :

.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;
}
Copier après la connexion

Conclusion :

En implémentant ce style CSS, nous pouvons garantir que les barres de défilement restent visibles pour les utilisateurs de trackpad Mac dans les navigateurs WebKit/Blink, fournissant une expérience de défilement cohérente et intuitive.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal