Comment puis-je empêcher les barres de défilement étant caché par les utilisateurs de OS X trackpad dans WebKit/Blink ?

Question

WebKit/Blink (Safari/Chrome) comportement par défaut sur Mac OS X depuis 10.7 (Lion) est de masquer les barres de défilement du pavé tactile utilisateurs lorsqu'ils ne sont pas en cours d'utilisation. Cela peut être source de confusion; la barre de défilement est souvent le seul repère visuel qu'un élément est déplacé.

Exemple (jsfiddle)

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

WebKit (Chrome) Capture D'Écran

Presto (Opera) Capture D'Écran

---

Comment puis-je la force d'une barre de défilement est affichée en permanence sur un élément déroulant dans WebKit?

Answer 1

L'apparence des barres de défilement peuvent être contrôlés avec WebKit l' -webkit-scrollbar pseudo-éléments ^[blog]. Vous pouvez désactiver par défaut l'apparence et le comportement en définissant -webkit-appearance ^[docs] à l' none.

Parce que vous êtes en train de retirer le style par défaut, vous devez également spécifier le style de vous-même ou la barre de défilement ne s'affichera jamais. Le code CSS suivant recrée l'apparence de l'affichage des barres de défilement:

Exemple (jsfiddle)

CSS

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

WebKit (Chrome) Capture D'Écran

Answer 2

Pour une demande d’une page web où j’ai ajouter des sections scrollables dynamiquement, j’ai déclencher les barres de défilement de OSX par défilement par programme un pixel vers le bas et sauvegarder :

Cela déclenche le repère visuel à la décoloration.

Answer 3

Navigateur barres de défilement ne fonctionnent pas du tout sur iPhone/iPad. Au travail, nous utilisons des scrollbars JavaScript personnalisés comme jScrollPane pour fournissent une interface utilisateur les navigateurs compatible : http://jscrollpane.kelvinluck.com/

Il fonctionne très bien pour moi - vous pouvez faire quelques barres de défilement personnalisé vraiment magnifique qui correspondent à la conception de votre site.

Answer 4

Une autre bonne façon de traiter avec Lion caché des barres de défilement pour afficher une invite pour faire défiler vers le bas. Il ne fonctionne pas avec de petites zones de défilement, tels que les champs de texte, mais bien avec de grandes zones de défilement et conserve le style général du site. Un site pour le faire est http://versusio.com, il suffit de cocher cette page d'exemple et d'attendre de 1,5 secondes pour voir l'invite de commandes:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

La mise en œuvre n'est pas difficile, mais vous devez prendre soin, que vous n'avez pas d'affichage de l'invite lorsque l'utilisateur a déjà défilé.

Vous avez besoin de jQuery + un trait de Soulignement et

$(window).scroll pour vérifier si l'utilisateur a déjà défilé en lui-même,

_.delay() pour déclencher un délai avant l'affichage de l'invite -- l'invite de commandes ne devrait pas être gênant

$('#prompt_div').fadeIn('slow') à s'estomper dans votre invite de et de cours

$('#prompt_div').fadeOut('slow') à s'estomper lorsque l'utilisateur d'un défilement après avoir vu l'invite

En outre, vous pouvez lier Google Analytics événements à surveiller le comportement de défilement.