How to make jQuery Mobile scrollview scroll infinitely left and right so the elements repeat back on themselves?

Question

Basically the same as this question: How to make an infinitely long scroll view on iPhone? but using jQuery Mobile not objective C.

I'm using this plugin: http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html in particular the example under "Horizontal Scrollview". I want it to loop back on itself so when the user gets to the far right, it will go back to the start and if they scroll left from the start it will go to the end.

I'm not bothered if the solution uses the scrollview plugin in particular or not just that it can have a similar effect.

UPDATE: I eventually did a different way as moving elements to the end or the start of the list seemed flickery with jQuery Mobile scrollview on an iPhone.

What I did was copy all of the li elements within the ul 3 times, so that it was 4 times longer. Then at the start of the script, position the scroll point at the start of the 3rd copy (so the left most point of the screen was exactly half way along the length of the list).

Then whenever the scroll position went beyond the start of the 4th copy, simply move the scroll position back to the middle (offset by how many pixels over it went). Then the same in reverse, triggering it went it went beyond the start of the 2nd copy. Reason I needed 4 copies was so there was a bit of leeway when you scrolled left fast and it went beyond the start of the 2nd copy.

Answer 1

So essentially you want to do something simular to what I did for: http://bbh.co.uk?

The logic is very simple, let's say you have 7 panels, the first thing I did was work out where the 0 point of the movement, that is where the centre of the 7 panels, in this case it's the 4th as we'd have 3 on the left and 3 on the right.

With this 0 point we can then decide where panels will go onces a scroll has occurred, say the user scrolls 2 from the left to the right, this means our 0 point becomes -2, therefore we move two from the right to the front of the left, i.e. we prepend them to the list.

The easiest way to manage it was with an array, since we can .push(), .pop(), .shift() and .unshift() the panels.

Once we had the logic in order we placed each set the CSS position of each panel as absolute and then calculated its position depending on where it was within the array, for example panel 0 would be at 0px left in the container and panel 7 would be at panel.width * 7 and so on.

You then need to make sure that the container is at the centre, that initial 0 point and boom, you've got some infinite scrolling.