style - ¿Cómo consigo barras de desplazamiento para mostrar en Mobile Safari?
service worker ios (7)
El complemento del selector de tiempo jQuery que escribí usa un div como bloque contenedor para la lista de tiempos, y en Mobile Safari no hay barras de desplazamiento para indicar que hay más horas disponibles que las que están visibles. Sé de usar dos dedos para desplazarse dentro del div (al menos en el iPad), pero eso solo funciona si el usuario sabe que hay más contenido para desplazarse y no hay ninguna indicación de que lo haya. Entonces, mi pregunta: ¿Alguien ha podido obtener barras de desplazamiento para mostrar en Mobile Safari? ¿Cómo lo hiciste?
Con respecto a la pregunta original: la mejor solución para tener barras de desplazamiento sería usar una biblioteca externa (ya recomendado iScroll es bueno, pero incluso la interfaz de usuario de jQuery contiene barras de desplazamiento ). Pero la visualización de barras de desplazamiento siempre presentes podría desviarse de la interfaz de usuario general de iOS (ver más abajo).
Alternativo sería indicar con otros elementos de la GUI que el contenido es desplazable. Considere los campos de gradiente pequeños al final del elemento (el contenido se desvanece hasta el fondo) que sugieren que el contenido continúa cuando se toca y se desplaza.
En iOS5 overflow: scroll funciona como se esperaba, es decir, permite que el div se desplace hacia arriba / abajo con un dedo dentro del área especificada por las dimensiones del div . Pero div divisable no tiene barras de desplazamiento. Esto es un poco diferente de la interfaz de usuario general en iOS (5). En general, tampoco hay barras de desplazamiento, pero aparecen cuando el usuario comienza a desplazarse por un área de contenido y se desvanece una vez que se detiene el evento táctil.
El safari móvil, por lo que he visto, no admite barras de desplazamiento. El mejor complemento que podría encontrar para hacer el trabajo es this .
Sus Demos están disponibles here . También tiene múltiples máscaras predefinidas para adaptarse a su aplicación.
Aquí hay una muestra de lo que obtendrás.
Para responder a Sam Hasler comentar arriba. Nicescroll 3 es un complemento de jquery que hace exactamente lo que quiere con efecto de entrada / salida y funciona en todos los principales navegadores de dispositivos móviles / tabletas / computadoras de escritorio.
Código:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
Por convención, las barras de desplazamiento no se utilizan en iOS.
Para un div con overflow: scroll , la única forma nativa de desplazarse es con dos dedos.
Puede echar un vistazo a iScroll , una biblioteca de JavaScript que maneja eventos táctiles e implementa el desplazamiento de un solo dedo (lo que los usuarios generalmente esperan en aplicaciones nativas) para divs.
Si quieres que el scroll esté siempre visible,
No establezca -webkit-overflow-scrolling: touch
a continuación, establezca un estilo personalizado para la barra de desplazamiento
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Se pierde el efecto de impulso, pero la barra de desplazamiento siempre estará allí.
(probado bajo iPhone 4 / iOS 7)
Suponiendo que está utilizando iOS5.0 o posterior, creo que debe usar lo siguiente:
-webkit-overflow-scrolling: auto (este es el estilo predeterminado)
automático: un dedo desplazándose sin impulso.
El otro estilo disponible es
-webkit-overflow-scrolling: touch
toque: desplazamiento de estilo nativo. Especificar este estilo tiene el efecto de crear un contexto de replanteo (como opacidad, máscaras y transformaciones).
Al usar el modo touch , la barra de desplazamiento estará visible cuando el usuario toque y se desplace, pero desaparecerá cuando no esté en uso. Si quieres hacerlo siempre visible, entonces esta vieja publicación te ayudará a:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Otra pieza de código para el pulgar por @BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Edición: con respecto al comportamiento de esta demostración , debe usar jQuery porque le ayudará mucho. $(document).ready(function(){//your code with timer}) código con el temporizador tendrá que restablecer la propiedad CSS a la normalidad después del tiempo deseado (digamos 5 seg.)
Para la demostración (que usted ha descrito), esto se inicia con el evento onhover , por favor verifique el fiddle que he creado para eso.
Eso reproduce los resultados en un navegador de escritorio y también funcionará en iPad, solo agregue su código de temporizador para satisfacer sus necesidades.
hasta ios5 no pudo desplazar divs internos, por lo que probablemente no esté viendo una barra de desplazamiento cuando intenta desplazarse porque no hay una.
No he probado en ios5 pero supuestamente el desplazamiento de divs internos ahora funciona.
Si no es un div interno, entonces debería poder ver la barra de desplazamiento cuando solo se desplaza, esto ya no es solo en iOS, Lion también se ha deshecho de todas las barras de desplazamiento nativas. Solo puede verlos cuando una ventana se desplaza o cuando la ventana se carga por primera vez.