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

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

Mary-Kate Olsen

Libérer： 2025-01-04 08:45:33

original

551 Les gens l'ont consulté

How Can I Prevent Scroll Bars from Hiding on macOS Trackpads in WebKit/Blink Browsers?

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

Copier après la connexion

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!