Evitar que las barras de desplazamiento se oculten para los usuarios de trackpad de MacOS en WebKit / Blink

El comportamiento predeterminado de WebKit / Blink (Safari / Chrome) en MacOS desde 10.7 (Mac OS X Lion) es ocultar las barras de desplazamiento de los usuarios del trackpad cuando no están en uso. Esto puede ser confuso ; la barra de desplazamiento es a menudo la única señal visual de que un elemento es desplazable.

Ejemplo ( 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;
}​

¿Cómo puedo forzar que una barra de desplazamiento se muestre siempre en un elemento desplazable en WebKit?

La apariencia de las barras de desplazamiento se puede controlar con los -webkit-scrollbarpseudo-elementos  ^{[ blog ] de} WebKit . Puede deshabilitar la apariencia y el comportamiento predeterminados configurando -webkit-appearance ^{[ docs ]} en none.

Debido a que está eliminando el estilo predeterminado, también deberá especificar el estilo usted mismo o la barra de desplazamiento nunca aparecerá. El siguiente CSS recrea la apariencia de las barras de desplazamiento ocultas:

Ejemplo ( 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; 
} 

Para una aplicación web de una página donde agrego secciones desplazables dinámicamente, active las barras de desplazamiento de OSX al desplazar programáticamente un píxel hacia abajo y hacia arriba:

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

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Esto activa y desactiva la señal visual.

Aquí hay un código más corto que permite volver a activar las barras de desplazamiento en todo el sitio web. No estoy seguro de si es muy diferente a la respuesta más popular actual, pero aquí está:

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

Encontrado en este enlace: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Las barras de desplazamiento del navegador no funcionan en absoluto en iPhone / iPad. En el trabajo, estamos utilizando barras de desplazamiento JavaScript personalizadas como jScrollPane para proporcionar una interfaz de usuario coherente entre navegadores: http://jscrollpane.kelvinluck.com/

A mí me funciona muy bien: puede crear algunas barras de desplazamiento personalizadas realmente hermosas que se adapten al diseño de su sitio.

Otra buena forma de lidiar con las barras de desplazamiento ocultas de Lion es mostrar un mensaje para desplazarse hacia abajo. No funciona con áreas de desplazamiento pequeñas, como campos de texto, pero sí con áreas de desplazamiento grandes y mantiene el estilo general del sitio. Un sitio que hace esto es http://versusio.com , solo revise esta página de ejemplo y espere 1.5 segundos para ver el mensaje:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

La implementación no es difícil, pero debe tener cuidado de no mostrar el mensaje cuando el usuario ya se ha desplazado.

Necesita jQuery + Underscore y

$(window).scroll para verificar si el usuario ya se desplazó solo,

_.delay() para desencadenar un retraso antes de mostrar el mensaje: el mensaje no debe ser molesto

$('#prompt_div').fadeIn('slow') desvanecerse en su pronta y, por supuesto,

$('#prompt_div').fadeOut('slow') desvanecerse cuando el usuario se desplaza después de ver el mensaje

Además, puede vincular eventos de Google Analytics para rastrear el comportamiento de desplazamiento del usuario.