如何使jQuery Mobile滚动视图向左和向右无限滚动，以便元素在自身上重复出现? [英] How to make jQuery Mobile scrollview scroll infinitely left and right so the elements repeat back on themselves?

问题描述

与此问题基本相同:如何在iPhone上制作无限长的滚动视图?，但使用jQuery Mobile而不是目标C.

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

我正在使用此插件: http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html ，尤其是"Horizo​​ntal Scrollview"下的示例.我希望它循环返回自己，这样当用户到达最右边时，它将回到起点，如果他们从起点向左滚动，它将终点.

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.

如果解决方案特别使用scrollview插件，或者仅仅是它可以产生类似的效果，我就不会感到烦恼.

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

更新:我最终采用了另一种方式，因为在iPhone上使用jQuery Mobile滚动视图将元素移到列表的末尾或列表的开头似乎很忽悠.

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.

我所做的是将ul中的所有li元素复制了3次，因此复制时间增加了4倍.然后，在脚本的开头，将滚动点定位在第三个副本的开头(因此，屏幕的最左点恰好位于列表长度的一半).

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).

然后，每当滚动位置超出第4个副本的开始位置时，只需将滚动位置移回中间(偏移其上的像素数)即可.然后反向进行同样的操作，触发它超过第二个副本的开始.我需要4份副本的原因是，当您快速向左滚动并超出第二份副本的开始时，会有一些回旋余地.

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.

推荐答案

因此，基本上，您想做一些与我所做的类似的事情: http://bbh.co.uk ?

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

逻辑很简单，假设您有7个面板，我做的第一件事是计算运动的0点，即7个面板的中心，在这种情况下，它是第4个左边有3个，右边有3个.

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.

有了这个0点，我们就可以确定一旦发生滚动，面板就会去哪儿，比如说用户从左向右滚动2，这意味着我们的0点变成了-2，因此我们将两个从右移到左边的前面，即我们将它们放在列表的前面.

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.

最简单的管理方法是使用数组，因为我们可以.push()，.pop()，.shift()和.unshift()面板.

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

一旦有了逻辑顺序，就可以将每个面板的CSS位置设置为绝对位置，然后根据其在数组中的位置来计算其位置，例如面板0将位于容器中的0px处面板7将位于panel.width * 7，依此类推.

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.

然后，您需要确保容器位于中心，初始0点和吊杆处，并进行了无限滚动.

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.

这篇关于如何使jQuery Mobile滚动视图向左和向右无限滚动，以便元素在自身上重复出现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！