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
Patricia Arquetteoriginal
2024-12-08 10:26:11243parcourir

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

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

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!

Déclaration:
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