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

Posted 2023-05-07

技术标签:

【中文标题】jQuery Mobile 在页面转换之前防止滚动到顶部？【英文标题】：jQuery Mobile prevent scroll-to-top before page transition? 【发布时间】：2013-02-21 17:42:55 【问题描述】：

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

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

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

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

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

【问题讨论】：

【参考方案1】：

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

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

有两种可行的解决方案：

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转换) 在页面改变之前。在这种情况下，当我们返回上一页时，我们可以使用pagebefpreshow 事件在页面显示之前静默滚动到底部。

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

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

更多信息

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

【讨论】：

抱歉回复晚了，非常感谢！我会试试这些。 iscroll 和 iscrollviews 对我的性能造成了不好的影响。我有数百个元素要滚动，包括图像:-(但无论如何谢谢。【参考方案2】：

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

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

添加以下 CSS：

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

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

我希望这会有所帮助。

【讨论】：

+1 完美！我尝试在div[data-role='page'] 上使用这种样式，它可以工作，我认为您不需要额外的容器？【参考方案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);

【讨论】：

这个答案对我有用，但似乎是从forum.jquery.com/topic/…复制而来的【参考方案4】：

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

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

到这里：

a.mobile.hideUrlBar

【讨论】：

【参考方案5】：

防止滚动到顶部的解决方案是：

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

【讨论】：

【参考方案6】：