Al desarrollar un sitio web para iPad, traté de usar la propiedad CSS overflow: autopara obtener las barras de desplazamiento si es necesario en un div, pero mi dispositivo se niega a mostrarlas incluso si el desplazamiento con dos dedos funciona.
Lo intenté con
overflow: auto;
y
overflow: scroll;
y el resultado es el mismo.
Solo estoy probando en un iPad (en los navegadores de escritorio funciona perfectamente).
¿Algunas ideas?
Respuestas:
Edite siguiendo el comentario dejado, amablemente, por kritzikratzi :
[Comenzando] con ios 5beta
-webkit-overflow-scrolling: touchse puede agregar una nueva propiedad que debería resultar en el comportamiento esperado.
Algunas lecturas adicionales, pero muy pocas:
Respuesta original , dejada para la posteridad.
Desafortunadamente overflow: auto, ni , ni scroll, produce barras de desplazamiento en los dispositivos iOS, aparentemente debido al ancho de pantalla que se tomaría en mecanismos tan útiles.
En cambio, como ha descubierto, los usuarios deben realizar el deslizamiento de dos dedos para desplazarse por el overflowcontenido -ed. La única referencia, ya que no puedo encontrar el manual del teléfono en sí, que pude encontrar está aquí: tuaw.com: iPhone 101: Desplazamiento con dos dedos .
La única solución que se me ocurre para esto es si pudiera usar algo de JavaScript, y tal vez jQTouch, para crear sus propias barras de desplazamiento para los overflowelementos. Alternativamente, puede usar las consultas @media para eliminar overflowy mostrar el contenido en su totalidad, como usuario de iPhone, esto obtiene mi voto, aunque solo sea por la pura simplicidad. Por ejemplo:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
El código anterior proviene de A List Apart , del mismo artículo vinculado anteriormente (no estoy seguro de por qué se fueron type="text/css", pero supongo que hay razones.
Aplicar este código en su css
::-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);
}
He hecho algunas pruebas y usando CSS3 para redefinir las barras de desplazamiento funciona y puedes mantener tu Overflow:scroll;oOverflow:auto
Terminé con algo como esto ...
::-webkit-scrollbar {
width: 15px;
height: 15px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
El único inconveniente que aún no he podido descubrir es cómo interactuar con las barras de desplazamiento en iProducts, pero puede interactuar con el contenido para desplazarlo.
::-webkit-scrollbarno funciona para iPhone 4 / iOS 7.
Solución dada por Chris Barr aquí
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
Funciona bien para mi. Elimine event.preventDefault si necesita usar algunos clics ...
Otras 2 personas en SO propusieron una posible solución solo de CSS al problema. La solución de David Thomas es perfecta, pero tiene el límite de que la barra de desplazamiento solo es visible durante el desplazamiento.
Para tener las barras de desplazamiento siempre visibles, es posible seguir las pautas sugeridas en los siguientes enlaces:
En mi experiencia, debe asegurarse de que el elemento se haya display:block;aplicado para -webkit-overflow-scrolling:touch;que funcione.
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px solid #eee;
}
Utilice este código, funciona en ios / android APP webview; Elimina algunos códigos CSS que no son portátiles;
Si está tratando de lograr un desplazamiento horizontaldiv con el toque en un dispositivo móvil, la corrección de CSS actualizada no funciona (probado en múltiples versiones de Android Chrome y iOS Safari), por ejemplo:
-webkit-overflow-scrolling: touch
Encontré una solución y la modifiqué para el desplazamiento horizontal desde antes del truco CSS. Lo probé en Android Chrome y iOS Safari y los eventos táctiles del oyente existen desde hace mucho tiempo, por lo que tiene un buen soporte: http://caniuse.com/#feat=touch .
Uso:
touchHorizScroll('divIDtoScroll');
Funciones:
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
Modificado de la solución vertical (pre truco CSS):
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/