que - personalizar scroll css
Evitar que las barras de desplazamiento se oculten para usuarios de trackpad de MacOS en WebKit/Blink (5)
Aquí hay un fragmento de código más corto que puede habilitar barras de desplazamiento en todo su sitio web. No estoy seguro 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);
}
Se encuentra en este enlace: http://simurai.com/blog/2011/07/26/webkit-scrollbar
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 panel táctil cuando no están en uso. Esto puede ser confuso ; la barra de desplazamiento es a menudo la única señal visual 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 Presto (Opera)
¿Cómo puedo forzar que una barra de desplazamiento siempre se muestre en un elemento desplazable en WebKit?
La apariencia de las barras de desplazamiento se puede controlar con WebKit''s -webkit-scrollbar pseudo-elements [ blog ] . Puede desactivar el aspecto y el comportamiento predeterminados configurando -webkit-appearance [ docs ] en none .
Como 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)
Las barras de desplazamiento del navegador no funcionan en absoluto en iPhone / iPad. En el trabajo, utilizamos barras de desplazamiento JavaScript personalizadas como jScrollPane para proporcionar una interfaz de usuario cruzada consistente en el navegador: http://jscrollpane.kelvinluck.com/
Funciona muy bien para mí: puedes hacer algunas barras de desplazamiento personalizadas realmente bellas que se ajusten al diseño de tu sitio.
Otra buena forma de lidiar con las barras de desplazamiento ocultas de Lion es mostrar un aviso 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 verifique 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 haya desplazado.
Necesita jQuery + Subrayado y
$(window).scroll para verificar si el usuario ya se ha desplazado solo,
_.delay() para desencadenar un retraso antes de que se muestre el aviso - el aviso no debe ser molesto
$(''#prompt_div'').fadeIn(''slow'') para desvanecerse en su mensaje y por supuesto
$(''#prompt_div'').fadeOut(''slow'') para atenuarse cuando el usuario se desplazó luego de ver el mensaje
Además, puede vincular eventos de Google Analytics para rastrear el comportamiento de desplazamiento del usuario.
Para una aplicación web de una página donde agrego secciones desplazables dinámicamente, disparo las barras de desplazamiento de OSX desplazando programáticamente un píxel hacia abajo y hacia atrás:
// Plain JS:
var el = document.getElementById(''scrollable-section'');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$(''#scrollable-section'').scrollTop(1).scrollTop(0);
Esto desencadena la entrada y salida de cue visual.