¿Cómo hacer que jQuery Mobile scrollview se desplace infinitamente hacia la izquierda y hacia la derecha para que los elementos se repitan en sí mismos?

Question

Básicamente lo mismo que esta pregunta: How to make an infinitely long scroll view on iPhone? pero usando jQuery Mobile no objetivo C.

estoy usando este plugin: http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html en particular, el ejemplo en "Horizontal ScrollView". Quiero que se repita sobre sí mismo, de modo que cuando el usuario llegue al extremo derecho, volverá al inicio y si se desplaza hacia la izquierda desde el inicio, irá hasta el final.

No me molesta si la solución usa el plugin scrollview en particular o no solo que puede tener un efecto similar.

ACTUALIZACIÓN: Eventualmente hice una manera diferente de mover elementos hasta el final o el comienzo de la lista parecía flickery con jQuery Mobile scrollview en un iPhone.

Lo que hice fue copiar todos los elementos li dentro del ul 3 veces, de modo que fue 4 veces más largo. Luego, al comienzo de la secuencia de comandos, coloque el punto de desplazamiento al comienzo de la tercera copia (de modo que el punto más a la izquierda de la pantalla esté exactamente a la mitad de la longitud de la lista).

Luego, cada vez que la posición de desplazamiento fue más allá del inicio de la 4ta copia, simplemente mueva la posición de desplazamiento hacia atrás al centro (compensada por la cantidad de píxeles sobre ella). Luego lo mismo a la inversa, desencadenándolo fue más allá del inicio de la 2da copia. La razón por la que necesitaba 4 copias era por lo que había un poco de margen de acción cuando se desplazó hacia la izquierda rápidamente y fue más allá del inicio de la 2da copia.

Answer 1

Entonces, en esencia, quiere hacer algo similar a lo que hice por: http://bbh.co.uk?

La lógica es muy simple, digamos que tiene 7 paneles, lo primero que hice fue calcular dónde estaba el punto 0 del movimiento, que es donde está el centro de los 7 paneles, en este caso es el 4º Tendríamos 3 a la izquierda y 3 a la derecha.

Con este 0 punto podemos decidir dónde irán los paneles cuando se haya producido un desplazamiento, digamos que el usuario se desplaza 2 de izquierda a derecha, esto significa que nuestro punto 0 se convierte en -2, por lo tanto, movemos dos desde la derecha al frente de la izquierda, es decir, los anteponemos a la lista.

La forma más fácil de manejar que fue con una matriz, ya que puede .push(), .pop(), .shift() y .unshift() los paneles.

Una vez que tuvimos la lógica en orden colocamos cada conjunto la posición CSS de cada panel como absoluto y luego calculamos su posición dependiendo de dónde estaba dentro del conjunto, por ejemplo el panel 0 estaría en 0px en el contenedor y el panel 7 estaría en panel.width * 7 y así sucesivamente.

Luego debe asegurarse de que el contenedor esté en el centro, ese punto 0 inicial y una pluma, tiene un desplazamiento infinito.