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


162

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 )

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;
}​
Captura de pantalla de WebKit (Chrome)

captura de pantalla de un div sin barra de desplazamiento visible

Captura de pantalla de Presto (Opera)

captura de pantalla de un div con una barra de desplazamiento visible


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


¿Has probado overflow: scroll? Esto solía funcionar en Chrome. Debería forzar que las barras de desplazamiento se muestren siempre.
xaddict

2
Tenga en cuenta que también es un problema en Firefox en Mac OS X.
Blaise

Hombre, odio cuando los sitios web se meten con la interfaz de usuario en mi sistema y agente de usuario.
amn

Respuestas:


249

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 )

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; 
} 
Captura de pantalla de WebKit (Chrome)

captura de pantalla que muestra la barra de desplazamiento de webkit, sin necesidad de desplazarse


1
Para las barras de desplazamiento forzadas del león macosx, el truco descrito aquí no funciona con esta técnica: stackoverflow.com/a/3417992/62255 . Sin embargo, no se preocupe, ya que aquí estamos estableciendo explícitamente las dimensiones, podemos acceder a ellas directamente.
jedierikb

55
Tenga en cuenta que también puede personalizar la pista / fondo de la barra de desplazamiento con:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }
XML

Tenga en cuenta que los estilos de barra de desplazamiento de webkit no funcionan en iOS 7 (y posiblemente 6).
RobW

44
Una cosa para mencionar es que, en mis pruebas y un comentario muy antiguo de otra persona , parece que no puede tener una barra de desplazamiento siempre activa Y el desplazamiento de impulso al que las personas están acostumbradas con iOS. Hacer el CSS de desplazamiento de impulso hizo que mis barras de desplazamiento personalizadas desaparecieran.
jmq

2
No he verificado esto últimamente, pero encontré esta nota en nuestro CSS que hacía referencia a esta solución: "Tenga en cuenta que esto mostrará las barras de desplazamiento de estilo OS X, por ejemplo, en Chrome en Windows".
Henrik N

19

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.


19

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


3

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.


2

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.