ipad - files - icloud

vista de lista lenta desplazándose en el iPad al desplazarse en un desbordamiento: auto div

Question

Estoy desarrollando una aplicación Phonegap para las principales plataformas de os y actualmente estoy probando en un iPad con iOS 5. Estoy usando jquery mobile. Entonces, para pantallas grandes, he usado el plugin para jview móvil de splitview. http://asyraf9.github.com/jquery-mobile/
He puesto un

$scrollArea.css(''overflow-y'',''auto'');
$scrollArea.css(''-webkit-overflow-scrolling'',''touch'');

para hacer que la página se desplace en lugar de usar iscroll como el plugin estaba usando. Ahora lo que está sucediendo es que la página no se está cargando / volviendo a pintar a medida que el usuario se desplaza. Tengo una lista de 100 elementos y me desplazo a través de ellos.

El desplazamiento no es lento, pero se tarda casi un segundo completo para que las nuevas filas de vista de lista aparezcan después de que se haya desplazado. Antes de eso, es un área en blanco.

Al observar, puedo ver que los elementos de la lista no aparecen hasta que el desplazamiento se detiene. (desplazamiento de momento)

Un problema similar está aquí http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div

¿Qué puedo hacer para que esto funcione normalmente? Lo mismo funciona bien en las pestañas de Android. pls ayuda.

EDITAR: Si solo uso

 $scrollArea.css(''overflow-y'',''auto'');

entonces no me enfrento a este problema de áreas en blanco momentáneas después de desplazarme, pero luego el desplazamiento es dolorosamente lento.

No sugiera usar iScroll. Ya lo intenté. es mucho más lento que con lo que obtengo -webkit-overflow-scrolling, y no puedo usarlo.

Answer 1

Mi acercamiento

Entonces, probé mucho y leí aún más sobre este problema. Terminé con una solución que está "bien" para mí (porque funciona), pero que definitivamente no está cerca de "perfecto".

Al usar este CSS:

.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

te tropiezas con muchos problemas cuando tienes un diseño complejo (en mi caso, una imagen de fondo a pantalla completa) y empeora aún más cuando utilizas elementos de posición absoluta e iframes . (Que es, por supuesto, el caso que necesitaba).

Entonces, ¿qué hizo el truco? Básicamente este CSS:

.container > * {
-webkit-transform: translate3d(0,0,0);
}

Con esta regla, el contenido casi siempre se procesaba de inmediato sin obtener esas áreas en blanco. Solo cuando se desplaza hacia abajo la primera vez muy rápido, parpadea un poco.

Pero tenga cuidado con la regla -webkit-transform: translate3d(0,0,0); . El uso de esta regla en gran medida en muchos elementos secundarios obligó a Safari a: a veces reducir la velocidad, pero casi todo el tiempo para bloquearse. Lo mejor es ajustar todos los elementos de contenido en un solo div , funciona bien.

¿Hecho? Realmente no. Todavía hay el iframe -issue: ("argh")

iframe

Cuando el iframe no está completamente en la parte visible del contenedor al inicio, se recorta o incluso no se muestra. Esto a veces también puede ocurrir al desplazarse. Entonces, traté de obligar a Safari a volver a renderizar esta parte cada vez que se completa el desplazamiento y se le ocurrió esto:

//using jQuery
var container = $(''#container'');
var iframe = $(''#iframe'');
container.scroll( function (event) {
iframe.css( ''marginLeft'', 1 );
setTimeout( function() {
iframe.css ( ''marginLeft'', 0 );
}, 1 );
});

Lo que ocurre con el evento de desplazamiento en un dispositivo táctil es que solo se activa cuando el desplazamiento ha llegado a su fin, por lo que esta función no se activa en ningún momento, sino cuando el impulso ha llegado a su fin. El movimiento corto en realidad no es visible.

Entonces, tal vez esto sea útil para alguien.

Más información

Aquí algunos enlaces más sobre este tema:

• Sobre cómo se dispara el evento de desplazamiento en iOS:

  evento de desplazamiento de javascript para iPhone / iPad?

• Informe de error de este problema a Apple:

  https://stackoverflow.com/a/7893031/1456376

• iframe ejemplo con el mismo problema:

  https://stackoverflow.com/a/8275972/1456376

Answer 2

Hemos utilizado el complemento a continuación en nuestro proyecto, ¿has probado este?

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview

En iOS usa aceleración de hardware para renderizar el desplazamiento. Es bastante fácil de usar, todo lo que tienes que hacer es asignar una clase adicional a tu div.

Tuvimos algunos problemas en Android 2 con este complemento, para superar esos problemas, cambiamos la propiedad jquery.mobile.scrollview.js en jquery.mobile.scrollview.js .

Espero que te ayude a resolver tu problema de desplazamiento