Empêcher les barres de défilement d’être masquées pour les utilisateurs du 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) consiste à masquer les barres de défilement des utilisateurs du trackpad lorsqu’elles ne sont pas utilisées. Cela peut être déroutant ; la barre de défilement est souvent le seul indice visuel indiquant qu’un élément est déroulable.

Exemple ( jsfiddle )

HTML

Foo
Bar
Baz
Help I'm trapped in an HTML factory!

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éroulant dans WebKit?

    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 l’option -webkit-appearance [ docs ] sur none .

    Comme vous supprimez le style par défaut, vous devrez également spécifier le style vous-même ou la barre de défilement ne sera jamais affichée. 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 survol

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

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

    Cela déclenche l’apparition et l’extinction du signal visuel.

    Voici un bout de code plus court qui permet de réactiver les barres de défilement sur l’ensemble de votre site Web. Je ne suis pas sûr que ce soit 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 adaptées au design de votre site.

    Un autre bon moyen de traiter les barres de défilement cachées de Lion consiste à afficher une invite pour faire défiler la liste. Il 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 qui fait cela est http://versusio.com , vérifiez simplement cette page d’exemple et attendez 1,5 secondes 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 devrait pas être envahissante

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

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

    En outre, vous pouvez associer des événements Google Analytics au suivi du comportement de défilement de l’utilisateur.