jQuery Mobile 修复了页脚与文本一起滚动一次然后在 iOS 应用程序中停止答案

【问题标题】：jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS AppjQuery Mobile 修复了页脚与文本一起滚动一次然后在 iOS 应用程序中停止
【发布时间】：2012-10-23 08:23:44
【问题描述】：

我使用 jquery-mobile (1.1.1) 和 Adobe PhoneGap Build 创建了一个 iOS 应用程序。该应用程序具有固定的页眉和页脚，并且转换设置为“无”。页脚包含 4 个导航按钮，通过 javascript 提供导航到应用程序内的四个页面。我使用的是多页模板，所以只有一个 HMTL 文件。

最初，我使用“data-position:fixed”在屏幕上定位页眉和页脚，但在页面之间切换时遇到了一些不必要的闪烁和页面跳转。因此，我转而使用 CSS 将页眉和页脚固定到屏幕上（如本文所述：https://github.com/jquery/jquery-mobile/issues/4024）。这解决了闪烁问题，但引入了不同的问题。

问题是：第一次滚动文本时，在任何页面上，页脚都会随着文本移动（即它不会保持固定）。但只是第一次 - 从那时起，每当我滚动文本时，页脚都会保持不变。为了澄清，这里有几个例子：

示例 1

打开应用，在第一页滚动文本 - 页脚移动。
切换到第二页，滚动文本 - 页脚保持固定。

示例 2

打开应用，切换到第二页而不在第一页上滚动 - 页脚在第二页上移动。
切换回首页，页脚保持不变。

我应该提到的另一件事 - 如果我启用页面转换，那么问题只会发生在第一页上。例如。如果应用程序加载并且我没有先滚动第一页上的文本就切换到另一个页面，页脚保持不变。

任何有关解决此问题的方法的建议将不胜感激。谢谢。

【问题讨论】：

标签： jquery css scroll footer css-position

【解决方案1】：

我刚刚遇到了完全相同的问题，并在应用程序启动时使用以下 hack 修复了它。请注意，我们在使用 Phonegap/Cordova 方法手动隐藏启动屏幕之前运行此 .js sn-p。这应该可以防止在用户看到主屏幕之前出现任何闪烁/移动。

function fixJqmScrollBug() {
    window.scrollTo(0, 1);
    setTimeout(function() {
        window.scrollTo(0, 0);
        if( navigator && navigator.splashscreen ) navigator.splashscreen.hide()
    }, 20);
}

此代码模拟第一次打破固定页脚的初始滚动，但将其放回默认位置。我们不得不稍微延迟重新定位回 (0,0) 的滚动以使修复工作 - 因此 20 毫秒超时。

【讨论】：