小编典典

jQuery Mobile防止在页面过渡之前滚动到顶部吗?

css

当我单击列表项以转到另一页时,当前页面跳到屏幕顶部,然后过渡到下一页。

此问题在jQM 1.2中发生,并且在新发布的1.3版本中仍未得到解决。

是否有人知道如何防止滚动到顶部,并且在使用“后退”按钮时还记得滚动位置?

这种令人讨厌的行为是不可接受的,并且破坏了整个应用程序的体验。

我将其作为Web应用程序在iPhone 4S和iOS 6.1.2上使用。


阅读 302

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

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

2.静音滚动

官方文档:http :
//jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

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

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

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

更多信息

如果您想了解有关此主题的更多信息,请阅读 本文 ,您还将找到一些可用的示例。

2020-05-16