Empêcher les barres de défilement d'être masquées pour les utilisateurs de trackpad MacOS dans WebKit / Blink

Le comportement par défaut de WebKit / Blink (Safari / Chrome) sur MacOS depuis la version 10.7 (Mac OS X Lion) est de masquer les barres de défilement des utilisateurs du trackpad lorsqu'ils ne sont pas utilisés. Cela peut être déroutant ; la barre de défilement est souvent le seul signal visuel qu'un élément peut faire défiler.

Exemple ( jsfiddle )

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

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

Comment puis-je forcer une barre de défilement à toujours être affichée sur un élément défilable dans WebKit?

L'apparence des barres de défilement peut être contrôlée avec les -webkit-scrollbarpseudo-éléments  de WebKit ^{[ blog ]} . Vous pouvez désactiver l'apparence et le comportement par défaut en définissant -webkit-appearance ^{[ docs ]} sur none.

Étant donné que vous supprimez le style par défaut, vous devrez également spécifier le style vous-même, sinon la barre de défilement ne s'affichera jamais. Le CSS suivant recrée l'apparence des barres de défilement masquées:

Exemple ( jsfiddle )

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

Pour une application Web d'une page où j'ajoute des sections à défilement de manière dynamique, je déclenche les barres de défilement d'OSX en faisant défiler par programme un pixel vers le bas et en arrière:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Cela déclenche le fondu du repère visuel.

Voici un morceau de code plus court qui réactive les barres de défilement sur l'ensemble de votre site Web. Je ne sais pas si c'est très différent de la réponse la plus populaire actuelle, mais la voici:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Trouvé à ce lien: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Les barres de défilement du navigateur ne fonctionnent pas du tout sur iPhone / iPad. Au travail, nous utilisons des barres de défilement JavaScript personnalisées comme jScrollPane pour fournir une interface utilisateur cohérente entre les navigateurs: http://jscrollpane.kelvinluck.com/

Cela fonctionne très bien pour moi - vous pouvez créer de très belles barres de défilement personnalisées qui correspondent à la conception de votre site.

Un autre bon moyen de gérer les barres de défilement cachées de Lion est d'afficher une invite de défilement vers le bas. Cela ne fonctionne pas avec de petites zones de défilement telles 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 faisant cela est http://versusio.com , vérifiez simplement cette page d'exemple et attendez 1,5 seconde pour voir l'invite:

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

L'implémentation n'est pas difficile mais vous devez faire attention à ne pas afficher l'invite lorsque l'utilisateur a déjà fait défiler.

Vous avez besoin de jQuery + Underscore et

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

_.delay() pour déclencher un délai avant d'afficher l'invite - l'invite ne doit pas être trop importune

$('#prompt_div').fadeIn('slow') pour s'estomper dans votre invite et bien sûr

$('#prompt_div').fadeOut('slow') pour disparaître lorsque l'utilisateur a fait défiler après avoir vu l'invite

En outre, vous pouvez lier des événements Google Analytics pour suivre le comportement de défilement de l'utilisateur.