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

Question

当我单击列表项以转到另一个页面时，当前页面会跳转到屏幕顶部，然后再转换到下一页。

这个问题发生在jQM 1.2中，在新发布的1.3版本中仍然没有修复。

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

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

我使用它作为一个网络应用程序，在iPhone4S，iOS6.1.2。

Answer 1

  $( 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 2

我可以通过以下方式（针对iOS）修复此问题：

>

添加以下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溢出滚动：触摸；要平滑滚动。

我希望这有帮助。

Answer 3

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

如果您在一个页面（比如1000px）上的一个长列表的一半处，并且您要传输到的页面只有几百个像素高，那么当前页面将在屏幕外正确设置动画，但新页面将不可见，因为它将位于视口上方。

有两种可行的解决方案：

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

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

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

这也是我们目前问题的解决办法。由于iScroll实现，无论listview滚动多远，页面都将占据页面高度的100%。这也是为什么返回时listview仍将保持在相同位置的原因。

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

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

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

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

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

下面是无声滚动的一个工作示例：http://jsfiddle.net/Gajotres/5zZzz/

如果您想了解有关此主题的更多信息，请阅读本文，您还可以找到工作示例。