jQuery Mobile-在changePage上设置目标页面的滚动位置

Question

我正在使用$.mobile.changePage()方法在jQuery Mobile网站中从Page1导航到Page2。

我想在特定的滚动位置显示Page2。

目前，使此功能起作用的唯一方法是从该页面的pageshow事件内调用$(window).scrollTop(this.scrollPosition) 。

问题在于，当显示Page2时，它首先显示页面顶部大约一秒钟，然后滚动到正确的位置。

我希望能够在显示页面之前设置滚动位置，以便在发生过渡动画时页面处于正确的滚动位置。 我尝试将滚动位置代码放入pagebeforeshow事件中，但这不起作用。

有办法可以轻松实现吗？

感谢您的任何帮助。

Answer 1

介绍

在描述您需要了解的可用解决方案之前，这不是错误，也不是完美的解决方案。 问题在于，要为过渡到另一个页面设置动画，视口必须位于页面的顶部，以便当前页面和在其中过渡的页面垂直排列。

如果您在一页上的一长串列表（例如1000像素）的中途，而要传输到的页面只有几百个像素，则当前页面将在屏幕上进行适当的动画处理，但是新页面将无法显示为它会在视口上方。

有2种可行的解决方案：

iScroll主页： http ://cubiq.org/iscroll-4

iScroll是一种JavaScript，可以在Web浏览器中的窗口中滚动内容，其行为与在iPhone和Android等移动设备上进行本机滚动非常相似。 这意味着您可以使用类似本机的滚动条和物理原理在浏览器中滚动窗口。

这也是我们当前问题的解决方案。 由于iScroll实现，无论列表视图滚动到多远，页面都将占据页面高度的100％。 这也是为什么返回列表视图仍将停留在相同位置的原因。

当然，如果要实施此解决方案，则应选择iScrollview实施。 您仍然可以实现iScroll，但这将花费更多时间。

此jQuery Mobile功能也是我们首先遇到此问题的原因。 在触发页面转换之前，原始页面会静默滚动到顶部。

在我们的例子中，当选择listview时，必须在更改页面之前记住其位置（在这里您将找到在页面转换期间存储的数据/参数的解决方案，只需搜索章节：页面转换之间的数据/参数操作）。 在这种情况下，当我们返回上一页时，可以使用pagebefpreshow事件在显示页面之前静默滚动到底部。

//scroll to Y 100px
$.mobile.silentScroll(100);

这是一个无声滚动的工作示例： http : //jsfiddle.net/Gajotres/2xfrM/

不幸的是，像您的示例一样，此解决方案仅适用于页面展示。 由于jQM体系结构，因此只能在pageshow事件期间执行此操作。