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

Question

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

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

目前，我可以让它工作的唯一方法是$(window).scrollTop(this.scrollPosition) 从pageshow该页面的事件中调用。

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

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

有没有办法可以轻松实现这一目标？

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

score 1 · Accepted Answer

介绍

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

如果您在一个页面（例如 1000 像素）上的长列表中途而您要转移到的页面只有几百像素高，那么当前页面将正确地在屏幕上显示动画，但新页面将不会显示为它会在视口上方。

有2个可行的解决方案：

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

这也是我们当前问题的解决方案。因为 iScroll 实现页面会占据 100% 的页面高度，不管 listview 滚动多远。这也是返回时 listview 仍将保持在同一位置的原因。

当然，如果你想实现这个解决方案，你应该选择 iScrollview 实现。您仍然可以实现 iScroll，但它会花费您更多的时间。

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

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

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

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

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