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

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

这是静音滚动的一个有效例子：http://jsfiddle.net/Gajotres/5zZzz/

更多信息

如果您想了解有关此主题的更多信息，请查看此 article ，您还可以找到有效的示例。

Answer 2

我能够通过以下方式修复此问题（适用于iOS）：

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

添加以下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; 能够平滑滚动。

我希望这会有所帮助。

Answer 3

  $( document ).on( "mobileinit", function() {
        var silentScroll = $.mobile.silentScroll;
          $.mobile.silentScroll = function( ypos ) {
        if ( $.type( ypos ) !== "number" ) {
            // FIX : prevent auto scroll to top after page load
            return;
        } else {
            silentScroll.apply(this, arguments);
        }
    }
  }

Answer 4

对于Jquery Mobile 1.4.5我通过在jquery.mobile-1.4.5.min.js中更改此行来修复它：

a.mobile.hideUrlBar＆amp;＆amp; g.load（a.mobile.silentScroll）

到此：

a.mobile.hideUrlBar

Answer 5

防止可可酚倒伏的解决方案是：

body onload =“ $。mobile.silentScroll（window.scrollY）;”

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

5 个答案:

1。 iScroll及其jQuery Mobile派生iScrollview

2。无声滚动

更多信息