jQuery Mobile 固定页脚与文本一起滚动一次然后在 iOS 应用程序中停止

Question

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

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

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

示例 1

• 打开应用，滚动第一页上的文本 - 页脚移动。
• 切换到第二页，滚动文本 - 页脚保持不变。

示例 2

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

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

如有任何关于解决此问题的建议，我们将不胜感激。谢谢。

Answer 1

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

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

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