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

Prévention de la dissimulation de la barre de défilement pour les utilisateurs du trackpad macOS dans WebKit/Blink

Dans macOS depuis la version 10.7, les navigateurs WebKit/Blink (par exemple, Safari , Chrome) masque automatiquement les barres de défilement aux utilisateurs du trackpad lorsqu'elles ne sont pas utilisées. Ce comportement peut masquer les repères visuels essentiels pour déterminer la possibilité de défilement d'un élément.

Comportement du WebKit par défaut :

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!</p>
<p></div> </p>
<p><strong>Comportement Presto (par exemple, Opera):</strong></p>
<p><div><pre class="brush:php;toolbar:false">Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!</p>
<p></div></p>
<p><strong>Solution : Afficher les barres de défilement en permanence</strong></p>
<p>Pour forcer une barre de défilement à rester visible dans WebKit, manipulez son apparence à l'aide de -webkit-scrollbar pseudo-élément :</p>
<p><strong>CSS :</strong></p>
<pre class="brush:php;toolbar:false">.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;
    background-color: rgba(0, 0, 0, .5);
}

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

Résultat :

Foo

Bar

Baz

Help I'm trapped in an HTML factory!

En désactivant l'apparence de la barre de défilement par défaut et en définissant un style personnalisé, nous veillons à ce que la barre de défilement reste visible pour les utilisateurs du trackpad macOS.

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!

css chrome safari webkit for using default this macos

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