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

162

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 )

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;
}​
Capture d'écran WebKit (Chrome)

capture d'écran d'un div sans barre de défilement visible

Capture d'écran de Presto (Opera)

capture d'écran d'un div avec une barre de défilement visible

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

css macos webkit scrollbar blink Jeremy Banks
la source
Avez-vous essayé overflow: scroll? Cela fonctionnait dans Chrome. Cela devrait forcer les barres de défilement à toujours s'afficher.
xaddict
2
Notez que c'est aussi un problème dans Firefox sur Mac OS X.
Blaise
Mec, je déteste quand les sites Web gâchent l'interface utilisateur sur mon système et mon agent utilisateur.
amn

Réponses:

250

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 )

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; 
}
Capture d'écran WebKit (Chrome)

capture d'écran montrant la barre de défilement de Webkit, sans avoir besoin de survoler

Jeremy Banks
la source
1
Pour les barres de défilement forcées macosx lion, l'astuce décrite ici ne fonctionne pas avec cette technique: stackoverflow.com/a/3417992/62255 . Pas de problème cependant - puisque nous définissons explicitement les dimensions ici, nous pouvons y accéder directement.
jedierikb
5
Notez que vous pouvez également personnaliser la piste / l'arrière-plan de la barre de défilement avec:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }
XML
Notez que les styles de barre de défilement Webkit ne fonctionnent pas dans iOS 7 (et peut-être 6).
RobW
4
Une chose à mentionner est que, dans mes tests et dans un très vieux commentaire de quelqu'un d'autre, il semble que vous ne puissiez pas avoir une barre de défilement toujours active ET le défilement semblable à l'élan auquel les gens sont habitués avec iOS. Faire le CSS à défilement dynamique a fait disparaître mes barres de défilement personnalisées.
jmq
2
Je n'ai pas vérifié cela récemment, mais j'ai trouvé cette note dans notre CSS qui faisait référence à cette solution: "Notez que cela affichera les barres de défilement de style OS X, par exemple dans Chrome sur Windows."
Henrik N
19

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.

Blaise
la source
19

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

Alex Banman
la source
3

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.

Chris M. Welsh
la source
2

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.

user976647
la source