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

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

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

有谁知道如何防止滚动到顶部，并记住使用后退button时的滚动位置？

这种恼人的行为是不可接受的，并打破了整个应用程序的经验。

我使用它作为一个Web应用程序，在iPhone 4S，与iOS 6.1.2。

Answer 1

在我描述你的可用解决scheme之前，你需要明白，这不是一个错误，也没有一个完美的解决scheme。 问题在于，为了过渡到另一个页面，animation视图必须位于页面的顶部，以便当前页面和过渡页面垂直排列。

如果你在一个页面上的一长串列表（比如说1000px）中，你要传输的页面只有几百个像素高，那么当前页面会正确地在屏幕上显示animation，但新页面将不可见它将在视口之上。

有两个可行的解决scheme：

1. iScroll及其jQuery Mobile衍生iScrollview

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

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

iScroll是一种JavaScript，可以在网页浏览器的窗口中滚动内容，其行为与iPhone和Android等移动设备上的本地滚动非常相似。 这意味着您可以使用本地滚动条和物理方式在浏览器中滚动窗口。

这也是解决我们目前的问题。 由于iScroll实现页面将占用100％的页面高度，无论多远列表视图滚动。 这也是为什么返回列表视图仍然保持在同一个位置。

当然，如果你想实现这个解决scheme，你应该selectiScrollview实现。 你仍然可以实现iScroll，但是需要更多的时间。

2.无声滚动

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

这个jQuery Mobilefunction也是我们为什么有这个问题的原因。 在页面转换被触发之前，原始页面默默地滚动到顶部。

在我们的例子中，当selectlistview时，必须记住它的位置（ 在页面转换过程中，您可以find存储的数据/参数的解决scheme，只需在页面转换之前search章节： 页面转换之间的数据/参数操作 ）。 在这种情况下，当我们返回到上一页时，我们可以使用pagebefpreshow事件在显示页面之前静默滚动到底部。

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

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

更多信息

如果你想了解更多关于这个话题，看看这篇文章 ，你也会发现工作的例子。

Answer 2

我能够通过以下方式解决这个问题（对于iOS）：

1. 为滚动部分添加一个额外的容器div。 通常围绕页面的滚动部分。 在我的情况正好在页眉和页脚代码之前。

2. 添加下面的CSS：

    .extracontainer {
     宽度：100％;
     身高：100％
     位置：绝对;
     顶部：0;
     正确：0;
     底部：0;
     左：0;
     保证金：0;
     填充：0;
     溢出：自动;
      overflow-y：scroll;
      -webkit-overflow-scrolling：touch;
    }
   

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

还要确保有-webkit溢出滚动：触摸; 有平滑的滚动。

我希望这有帮助。

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 && g.load（a.mobile.silentScroll）

对此：

a.mobile.hideUrlBar

Answer 5

尝试使用scrollstart来检测jQuery Mobile中的窗口滚动事件，以防您需要:)