16

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

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

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

这种恼人的行为是不可接受的，并且会破坏整个应用程序的体验。

我在 iPhone 4S 和 iOS 6.1.2 上将它用作 web 应用程序。

4

6 回答 6

9

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

如果您在一个页面（例如 1000 像素）上的长列表中途而您要转移到的页面只有几百像素高，那么当前页面将正确地在屏幕上显示动画，但新页面将不会显示为它会在视口上方。

有2个可行的解决方案：

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% 的页面高度，不管 listview 滚动多远。这也是返回时 listview 仍将保持在同一位置的原因。

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

2.无声滚动

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

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

In our case, when listview is selected, its position must be remembered ( here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions ) before page is changed. 在这种情况下，当我们返回上一页时，我们可以使用pagebefpreshow事件在页面显示之前静默滚动到底部。

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

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

更多信息

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

于 2013-03-06T20:10:21.160 回答
9

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

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

  2. 添加以下 CSS：

    .extracontainer {
  宽度：100%；
  高度：100%；
  位置：绝对；
  顶部：0；
  右：0；
  底部：0；
  左：0；
  边距：0；
  填充：0；
  溢出：自动；
  溢出-y：滚动；
  -webkit-溢出滚动：触摸；
}

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

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

我希望这有帮助。

于 2013-07-01T03:21:47.057 回答
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);
        }
    }
  }
于 2015-04-16T04:24:59.207 回答
1

对于 Jquery Mobile 1.4.5，我通过更改 jquery.mobile-1.4.5.min.js 中的这一行来解决这个问题：

a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)

对此：

a.mobile.hideUrlBar

于 2015-07-22T18:46:59.073 回答
1

防止scrool to top的解决方案是：

正文 onload="$.mobile.silentScroll(window.scrollY);"

于 2018-11-20T14:36:24.483 回答
0

尝试使用scrollstart来检测 jquery mobile 中的窗口滚动事件，以防万一:)

于 2017-11-28T05:01:43.787 回答