Question

在花了16个小时并牺牲了各种神灵之后，我必须遗憾地说我正处于精神崩溃的边缘。

我正在为Android编写一个PhoneGap 2.8应用程序（将来将移植到iOS）。作为主要框架，我使用jQuery（带有许多插件），Require，Underscore和Backbone。在一个致命的早晨，我得到了一个任务，我的应用程序的标题菜单必须“模仿”Facebook应用程序的标题的方式（按照滚动）。

最初我认为将“position：fixed”属性添加到标题div会很简单 - 我从来没有错过。事实证明，position：fixed css属性在WebView中无法正常工作，而且这个问题已经存在多年了。这个问题已在各种论坛和文章中进行了详细讨论，并提出了各种“解决方案” - 在我的案例中都没有。

我试图在滚动时将标题的位置设置为固定，在滚动完成时设置为绝对。理论上它有效，但它是滞后的。经过尝试，我查看了可能对案例有所帮助的不同插件或框架。 iScroll - 强制指定的结构为html，严重缺乏文档使我远离它。 jQueryMobile - 因为它是一个完整的框架，将它集成到我的项目意味着改变很多东西。据我了解，它不会提供持久性标题。

我听说过Bartender和GloveBox，但他们都没有文档，而且他们没有不断发展（最后的提交都是>岁）。

使用jsHybugger我在标题位置时检查了标题：修复了我注意到在检查器中选中了一个div的蓝色框是保留在标题点击区域的位置。因此，如果我滚动，标题会随着视口移动，但是hitarea会保持原位。它让我想知道，如果有办法迫使WebView重新计算点击区域？

非常感谢所有和任何帮助。

Answer 1

因此，受到this link的启发，我快速fiddle了解了如何在没有position:fixed的情况下实现这一点。请注意，小提琴与此处的代码不同，它只是说明了它应该如何工作。

<强> HTML

<div class="page-wrapper">
    <div class="header"><h3>header</h3></div>
    <div class="content-wrapper">
        <div class="content">
          <!-- Your content goes here -->
        </div>
    </div>
</div>

的 CSS

body { height: 100%; padding: 0; margin: 0; } .page-wrapper { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; overflow: hidden; } .header { position: absolute; top:0; left:0; right:0; padding: 3px 0; color: #FFF; background: #000; text-align: center; } .content-wrapper { position: absolute; padding:0; top: 65px; left: 0; right: 0; bottom:0; background: #CCC; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .content { padding: 15px; }

Answer 2

这不是phonegap的问题。实际上位置：固定不能在Android版本小于4.0 它有一个快速的CSS修复：

<div class="header"> this is fixed positioned div<div>

的CSS：

.header{ position:fixed ; -webkit-backface-visibility: hidden;  top:0; left:0; width: 100px; height:30px; background: red; }

Answer 3

在继承了使用定位系统的项目后，我遇到了。大多数人可能会知道现在不走这条路，但以防万一有人确实在这里寻找解决方案...

使用flexbox布局可以实现上述目标。

这样，css如下：

.pageWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
}

.screen-content-wrapper {
    padding:0;
    flex: 1;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

我没有编辑内容CSS，因此仅使用以上内容实现了我追求的目标。

希望有人会对此有所帮助。

Phonegap 2.8位置：固定不正常

3 个答案: