web-dev-qa-db-fra.com

Mac OS X Lion, barres de défilement et facilité d'utilisation du site Web

J'ai un certain nombre de div débordées que j'utilise pour afficher beaucoup de contenu dans un espace restreint (comme de longues listes, etc.). Donner aux divs la règle CSS de overflow: auto; fonctionnait toujours comme un charme, donnant à l'utilisateur des barres de défilement pour indiquer que davantage de contenu était disponible.

Ceci est un peu jeté par la fenêtre avec Mac OS X Lion, qui (par défaut) cache les barres de défilement, sauf si vous faites défiler activement. J'aime bien travailler avec une application sur mon ordinateur, car je pense qu'il existe de très puissants indices visuels que vous pouvez faire défiler pour voir plus de contenu. Sur les éléments de page Web, c'est beaucoup moins clair et je crains que mes utilisateurs ne sachent qu'il y a plus de contenu disponible (exemple typique: les "Questions avec des titres similaires" de StackOverflow lors de la saisie d'une nouvelle question en sont un bon exemple. ).

S'agit-il d'une préoccupation légitime, ou les utilisateurs de Lion sauront-ils que, si quelque chose semble être coupé, cela indique que le défilement est peut-être disponible? Existe-t-il des solutions de contournement pour, par exemple, forcer les navigateurs exécutés sur Lion à rendre les barres de défilement s'il s'agit d'un élément de la page (et non de la page elle-même)?

macosusabilityosx-lion
43
neezer

Je ne suis pas d'accord avec ça. Oui, je comprends l'argument UI/UX. Toutefois, certains sites, notamment l’approche horizontale pour la navigation, en auraient besoin, car les utilisateurs ne savent peut-être pas que la navigation se fait horizontalement. Un correctif pour le forcer a cependant été mentionné. J'ai trouvé que cela fonctionne bien:

Ouvrir mon code dans Mac Safari Chrome, etc. (JS FIDDLE PREVIEW) 

<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover, 
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>

<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto"> 
  <!-- Just fit content inside this that scrolls horizontally. Example -->
  <table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <div style="background:#eee;width:9000px;min-height:400px">hello</div>
      </td>
    </tr>        
  </table>
</div>
12
TheBlackBenzKid

Existe-t-il des solutions de contournement pour, par exemple, forcer les navigateurs exécutés sur Lion à afficher les barres de défilement s'il s'agit d'un élément de la page?

Ceci est une attaque. Laissez le système s'en occuper. Si l'utilisateur utilise Lion, c'est parce qu'il aime ça. Et s'ils l'utilisent et n'aiment pas les nouvelles barres de défilement, ils ne feront que changer cela dans les Préférences Système.

8
sidyll

Je traitais JUSTE de ce même problème. Voici le correctif que j'ai trouvé. La barre de défilement apparaît toujours avec Safari sur les Mac Air et iPad avec lesquels j'ai testé. Bien sûr, ce n'est que lorsqu'il y a plus de contenu à voir. Pas quand tout le contenu est affiché.

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
0
The Duke Of Marshall שלום

OS X Lion est vraiment en train de forcer le problème. Les utilisateurs de navigateurs mobiles (à la fois iOS et Andriod) en parlent depuis longtemps ... le truc du débordement ne fonctionne pas pas / en général; vous devez réfléchir davantage à la conception de la page ou regarder au-delà du comportement standard du navigateur et ajouter la prise en charge de JavaScript pour le toucher et le défilement (par exemple, jqTouch).

Malheureusement, le comportement de la barre de défilement de Lion n’affecte pas que les sites Web. Par exemple, cela rend les sessions vnc sur des machines avec des paramètres d'affichage volumineux plutôt gênants (il faut redimensionner la fenêtre vnc pour convaincre Lion de me montrer une barre de défilement).

Doublement malheureusement, la solution consiste à aller dans "Préférences> Général> Afficher les barres de défilement:" et à le mettre à "toujours". En quelque sorte, annule toute dynamique que Apple aurait pu essayer de créer avec Lion. Mais être capable d’utiliser réellement cette fichue chose est un atout général.

0
tardate

Lion s’occupe de cela lui-même en faisant clignoter les barres de défilement de chaque élément défilant pendant un instant, ce qui donne à l’utilisateur un indice initial indiquant qu’il reste encore beaucoup à faire défiler. Bien sûr, l’utilisateur peut ou non remarquer cela. Si l'utilisateur est habitué à la façon de faire du Lion, votre site Web ne sera pas le seul endroit où cela se produira et l'utilisateur sait probablement comment s'y prendre. Si votre boxen look "unscrollable" sans barres de défilement, vous voudrez peut-être indiquer plus clairement qu’elles peuvent défiler, par exemple. en ayant une bordure claire autour de la boîte avec un contenu coupé à l'intérieur. Cela peut être quelque chose que vous voudrez faire indépendamment de Lion.

Si vous pouvez améliorer votre interface utilisateur pour rendre la possibilité de défilement plus évidente, faites-le dans un sens ou dans l'autre. Sinon, si votre contenu est présenté de manière à indiquer qu'il y en a plus, je ne m'inquiéterais pas de l'absence de barres de défilement sur un système si l'utilisateur devait y être habitué.

Vous voudrez peut-être transmettre ceci à https://ux.stackexchange.com/ pour obtenir de véritables opinions d'experts.

0
deceze