简介

Question

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

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

目前我能让这个工作的唯一方法是致电$(window).scrollTop(this.scrollPosition) 来自该页面的pageshow事件。

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

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

我有办法轻松实现这个目标吗？

感谢您提前提供任何帮助。

Answer 1

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

如果你在一个页面上的长列表中间（比如说1000px）并且你要转移到的页面只有几百个像素高，那么当前页面会在屏幕上正常显示动画，但新页面不会在视口上方可见。

有两种可行的解决方案：

iScroll及其jQuery Mobile派生iScrollview

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/

不幸的是，在您的示例中，此解决方案仅适用于pageshow。由于jQM架构，只能在pageshow事件期间执行此操作。