web-dev-qa-db-fra.com

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

Le comportement par défaut de WebKit/Blink (Safari/Chrome) sous MacOS depuis 10.7 (Mac OS X Lion) consiste à 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 la seule indication visuelle qu'un élément peut 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;
}​

screenshot of a div with no visible scroll bar

screenshot of a div with a visible scroll bar

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

cssmacoswebkitscrollbarblink
154
Jeremy Banks

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

Comme 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’aspect 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; 
}

screenshot showing webkit's scrollbar, without needing to hover

237
Jeremy Banks

Pour une application Web d'une page dans laquelle 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 de revenir 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 va-et-vient visuel du signal.

17
Blaise

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, 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

12
Alex Banman

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, telles que jScrollPane, pour fournir une interface utilisateur multi-navigateur cohérente: 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 au design de votre site.

3
Chris M. Welsh

Un autre bon moyen de gérer les barres de défilement cachées de Lion consiste à afficher une invite à faire défiler l'écran. Cela ne fonctionne pas avec les petites zones de défilement telles que les champs de texte, mais bien avec les grandes zones de défilement et conserve le style général du site. Un site faisant ceci est http://versusio.com , il suffit de vérifier cette page d’exemple et d’attendre 1,5 seconde pour voir l’invite:

http://versusio.com/fr/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 seul,

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

$('#Prompt_div').fadeIn('slow') pour se fondre dans votre invite et bien sûr

$('#Prompt_div').fadeOut('slow') pour disparaître progressivement lorsque l'utilisateur a fait défiler l'écran 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.

2
user976647