1. Inicio
  2. Pregunta y respuesta
  3. Evento de desplazamiento en el navegador Android que no se activa. Necesito solución

Evento de desplazamiento en el navegador Android que no se activa. Necesito solución

2012-06-14 18 views
5

He creado un sitio web con una escena callejera de paralaje. Vea here para una versión archivada.Evento de desplazamiento en el navegador Android que no se activa. Necesito solución

Funciona perfectamente en todos los principales navegadores de escritorio y Safari Mobile. Funciona bien en Mobile Firefox y Chrome para Android Beta también. Sin embargo, el navegador predeterminado de Android tiene problemas con el evento de desplazamiento. Déjame ser claro. El desplazamiento no es el problema. El div se desplaza según sea necesario. El evento de desplazamiento no se activa. Este problema lo experimento tanto en Honeycomb como en ICS.

No me preocupan otros navegadores para dispositivos móviles porque para los tamaños de pantallas de dispositivos móviles, por lo general, no se ve la escena de paralaje; Las mediaqueries y la carga de JavaScript condicional se encargan de eso. Diseño receptivo y todo ese jazz.

Básicamente, he escrito un plugin de jQuery parallise() que posiciona cada imagen en función de su posición y 'profundidad'. Esta función está vinculada al evento de desplazamiento.

En el navegador Android, este evento solo se dispara al comienzo del próximo contacto, en lugar de continuamente.

OK, así que pensé que quizás si enlazaba la función a los eventos touchstart, touchmove y touchend resolvería mi problema. Sin cigarro. Other touch events are also bugged. La aplicación de la solución sugerida hace que los eventos se activen, pero como tengo que hacerlo al e.preventDefault(), el desplazamiento (el punto entero del ejercicio) está deshabilitado.

¿Qué pasa si solo sondeo la posición de la etapa div en relación con la ventana div? Resulta que la información de posición solo se actualiza al al comienzo del próximo contacto.

Estoy al final de mi vida. Cualquier ayuda sería muy apreciada.

Fuente

2012-06-14 Xandor Schiefer

+0

Ok, tengo que usar el dominio de prueba para un sitio diferente. Si alguien quiere ayudar con este problema, por favor deje un comentario y lo voy a poner de nuevo. El sitio también está en vivo en [smartdevice.co.za] (http://smartdevice.co.za) pero la ventana gráfica no está configurada en '960px'. Le hemos dicho al cliente que este es un problema del navegador sobre el que no tenemos control, y el impacto del problema está limitado a las tabletas Android que solo ejecutan el navegador predeterminado. Sin embargo, para la posteridad, si conoce una solución, por favor deje un comentario. –

+0

¿Alguna vez resolvió este problema? – IamDeveloper

+0

Desafortunadamente no. :(El problema está en el navegador. Cierto código que es utilizado por casi todos los eventos táctiles no se comporta como se esperaba, por lo que me es imposible crear una solución temporal, ya que todos dependería de un evento táctil en algún momento. Por cierto, el sitio mencionado en un comentario anterior ya no contiene mi código, ya que despedimos al cliente. Una copia del sitio está disponible en http://xandor.co.za/smartdevice. –

Respuesta

1

Incluso si los eventos táctiles funcionaron correctamente en las versiones con errores de Android, y usted fue capaz de seguir efectivamente la posición de desplazamiento nativo durante un arrastre, esto sería propenso a error. Por ejemplo, no daría cuenta de la animación de momento que ocurre después de que el toque finalizó.

iOS y Android hacen sacrificios para mejorar el rendimiento del desplazamiento. En ambas plataformas, no es posible obtener la posición de desplazamiento precisa hasta que el desplazamiento se haya completado. El evento de desplazamiento (en el <body>) no se dispara hasta que finaliza la animación de impulso. Entonces, si bien su pregunta original es acerca de los eventos de desplazamiento en un desbordamiento de <div>, arreglar esto podría no ser totalmente útil para usted de todos modos.

Si desea que una animación se actualice a tiempo con el desplazamiento, entonces debe realizar el desplazamiento programáticamente en lugar de utilizar el desplazamiento nativo del navegador. La mejor biblioteca para hacer esto es iScroll. Puede lograr efectos de paralaje muy fácilmente como se ve en this demo.

Si necesita efectos más complejos (el carácter andante, en su ejemplo), puede optar por la versión "sonda" de iScroll que permite un sondeo perfecto de la posición de desplazamiento a cambio de un rendimiento reducido.

Sin embargo, hay muchas desventajas de utilizar iScroll:

  • Es posible que tenga que cambiar su Estilo y etiquetado de
  • Es una sobrecarga innecesaria para navegadores de escritorio, pero debido a los cambios de marcado puede ser difícil de usar solo como una reserva
  • El desplazamiento no se sentirá perfecto: en iOS, con su excelente rendimiento de desplazamiento, la pequeña diferencia en el cálculo del momento puede parecer discordante. En Android, el desplazamiento puede ser más lento de lo habitual.

Fuente

2014-02-07 10:42:48 Nevett

Cuestiones relacionadas

 Cuestiones relacionadas