macos - Mac OS X Lion, barras de desplazamiento y usabilidad del sitio web

usability osx-lion

Question

Tengo una cantidad de divs desbordados que utilizo para mostrar mucho contenido en espacios pequeños (como listas largas, etc.). Dando a los divs la regla CSS de overflow: auto; siempre funcionaba como un amuleto, dando al usuario barras de desplazamiento para indicar que había más contenido disponible.

Esto se tira un poco por la ventana con Mac OS X Lion, que (como predeterminado) oculta las barras de desplazamiento a menos que estés desplazándote activamente. Me gusta cuando trato con una aplicación en mi computadora, porque creo que hay muy buenas pistas visuales que puede desplazarse para ver más contenido. En los elementos de página web, es mucho menos claro, y me preocupa que mis usuarios no sepan que hay más contenido disponible (por ejemplo: las "Preguntas con títulos similares" de StackOverflow al ingresar una nueva pregunta es un buen ejemplo de esto )

¿Es esto una preocupación legítima, o los usuarios de Lion sabrán que si algo parece estar cortado, indica que el desplazamiento podría estar disponible? ¿Hay alguna solución para, por ejemplo, forzar los navegadores que se ejecutan en Lion para renderizar barras de desplazamiento si es un elemento en la página (y no la página en sí)?

Answer 1

¿Hay soluciones para, por ejemplo, obligar a los navegadores que se ejecutan en Lion a renderizar barras de desplazamiento si se trata de un elemento de la página?

Este es un ataque. Deje que el sistema se encargue de eso. Si el usuario usa Lion, es porque les gusta esto. Y si lo usan y no les gustan las nuevas barras de desplazamiento, simplemente lo cambiarán en Preferencias del Sistema.

Answer 2

Como no soy usuario de Mac, me mantendré al margen de la discusión filosófica sobre si Lion debería o no ocultar barras de desplazamiento.

En cuanto a forzar que las barras de desplazamiento aparezcan en los elementos de la página web, simplemente configurando el overflow: scroll de CSS overflow: scroll hace el truco. Eso establece que las barras de desplazamiento vertical y horizontal siempre aparezcan, y es bastante obvio cuando no tienen nada para desplazarse.

Si solo desea que se desplace vertical u horizontalmente, y que no aparezca la barra de desplazamiento de la otra dimensión, puede usar overflow-y: scroll o overflow-x: scroll respectivamente, en lugar de overflow: scroll . Esto funciona en todos los navegadores modernos, aunque no en IE8 y menos.

Answer 3

Lion se encarga de esto al mostrar las barras de desplazamiento en cualquier elemento desplazable por un instante cuando aparece, dando al usuario una pista inicial de que hay más para desplazarse. Por supuesto, el usuario puede o no darse cuenta de esto. Si el usuario está acostumbrado a la forma de hacer de Lion, su sitio web no será el único lugar donde esto sucederá y el usuario probablemente sepa cómo manejarlo. Si su apariencia de boxen es "inservible" sin barras de desplazamiento, es posible que desee dar una indicación más clara de que son desplazables, por ejemplo, teniendo un borde claro alrededor del cuadro con algún contenido de corte dentro. Esto puede ser algo que quieras hacer independientemente de Lion.

Si puede mejorar su interfaz de usuario para que la capacidad de desplazamiento sea más obvia, hágalo de cualquier manera. De lo contrario, si su contenido se presenta de una manera que sugiera que hay más, no me preocuparía perder barras de desplazamiento en un sistema donde el usuario debería estar acostumbrado.

Es posible que desee llevar esto a https://ux.stackexchange.com/ para obtener algunas opiniones de expertos reales.

Answer 4

No estoy de acuerdo con esto Sí, entiendo el argumento UI / UX. Sin embargo, algunos sitios, especialmente el enfoque Horizontal para navegación, necesitarían esto, ya que los usuarios pueden no saber que la navegación se realiza de forma horizontal. Sin embargo, se ha mencionado una solución para forzarlo. He encontrado que esto funciona bien:

Abra mi código en 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>

Answer 5

OS X Lion realmente solo está forzando el problema. Los usuarios de navegadores móviles (iOS y Andriod) han estado quejándose de esto por años ... el truco de desbordamiento no funciona en general; necesita pensar más en el diseño de la página o mirar más allá del comportamiento estándar del navegador y agregar soporte de JavaScript para tocar y desplazarse (por ejemplo, jqTouch).

Desafortunadamente, el comportamiento de la barra de desplazamiento de Lion no solo afecta a los sitios web. Por ejemplo, hace que mis sesiones de vnc en máquinas con grandes configuraciones de pantalla sean bastante molestas (tengo que cambiar el tamaño de la ventana de vnc para convencer a Lion de que me muestre una barra de desplazamiento).

Desafortunadamente, desafortunadamente, la solución es ir a "Preferencias> General> Mostrar barras de desplazamiento:" y establecer a "siempre". De alguna manera, deshace cualquier impulso que Apple pueda haber estado tratando de construir con Lion. Pero ser capaz de usar la maldita cosa es una carta de triunfo de propósito general.

Answer 6

SOLO estaba tratando con este mismo problema. Aquí está la solución que encontré. Hace que la barra de desplazamiento siempre aparezca con Safari en Mac Air y iPad con los que probé. Por supuesto, esto es solo cuando hay más contenido para ser visto. No cuando se muestra todo el contenido.

::-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);
}