jQuery Mobile在页面转换之前阻止滚动到顶部？

Question

当我点击列表项目,转到另一个页面时,当前页面会跳转到屏幕顶部,然后转换到下一页面.

这个问题出现在jQM 1.2中,并且在新发布的1.3版本中仍然没有修复.

有人知道如何防止滚动到顶部,并在使用后退按钮时记住滚动位置吗？

这种恼人的行为是不可接受的,并打破了整个应用体验.

我在iPhone 4S上使用它作为webapp,使用iOS 6.1.2.

Answer 1

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

如果你在一个页面上的长列表中间(比如说1000px)并且你要转移到的页面只有几百个像素高,那么当前页面将在屏幕上正确显示动画,但新页面将不会显示为它将在视口上方.

有两种可行的解决方案:

1. iScroll及其jQuery Mobile派生iScrollview

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

iScrollview主页:https://github.com/watusi/jquery-mobile-iscrollview

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

这是一个静音滚动的工作示例:http://jsfiddle.net/Gajotres/5zZzz/

更多信息

如果您想了解有关此主题的更多信息,请查看本文,您还可以找到有用的示例.

Answer 2

我能够通过以下方式修复此问题(适用于iOS):

1. 为滚动部分添加额外的容器div.通常围绕页面的滚动部分.在我的情况下,在标题之后和页脚代码之前.

2. 添加以下CSS:

   .extracontainer {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: 0;
     padding: 0;
     overflow: auto;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
   

一些CSS可能是额外的,但在我的情况下,它是为了避免与我使用负边距,填充等的一些其他样式的任何问题.

还要确保-webkit-overflow-scrolling:touch; 平滑滚动.

我希望这有帮助.