Phonegap 2.8 位置：已修复无法正常工作答案

【问题标题】：Phonegap 2.8 Position: fixed is not working properlyPhonegap 2.8 位置：已修复无法正常工作
【发布时间】：2013-10-02 06:57:36
【问题描述】：

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

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

最初，我认为在标题 div 中添加“position:fixed”属性会很简单——如果我从来没有更错的话。事实证明，position:fixed css 属性在 WebView 中无法正常工作，并且该问题已经持续多年。这个问题已经在各种论坛和文章中进行了详细讨论，并且已经提出了各种“解决方案”——在我的情况下都没有。

我试图在滚动时将标题的位置设置为固定，在滚动完成时将其设置为绝对。理论上它有效，但它是滞后的。在尝试过之后，我研究了可以在这种情况下提供帮助的不同插件或框架。 iScroll - 将指定的结构强制为 html 并且严重缺乏文档让我远离它。 jQueryMobile - 因为它是一个完整的框架，所以将它集成到我的项目中意味着要改变很多东西。据我了解，它不会提供持久的标头。

我听说过 Bartender 和 GloveBox，但它们都没有文档，而且它们也没有持续开发（最后一次提交是 > 岁）。

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

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

【问题讨论】：

也许这个答案有帮助：stackoverflow.com/questions/14267527/…

标签： javascript html css cordova

【解决方案1】：

因此，受this link 的启发，我快速编写了fiddle，说明如果没有position:fixed，这将如何工作。请注意，fiddle 与此处的代码不同，它只是说明了它应该如何工作。

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;
}

【讨论】：

我已经尝试过了，但我的 android (Galaxy S2) 上没有滚动条，overflow-y: 滚动条似乎有问题； :(
让我解释一下，Scroll 存在，但它不仅会滚动我的内容 div，还会滚动整个页面，因此我的标题也会滚动。
嗯，它可以在 Android Emulator Webview 中进行一些修改。看看mwfire.de/test/index.html 和源代码。那样有用吗？因为它在框架中不起作用，所以不能把小提琴弄好......
我给自己找到了一个可行的解决方案：D。我将我的内容包装在一个 div (contentWrapper) 中，并说他是溢出的内容包装器：隐藏。然后我说内容的宽度，它就像一个魅力。嗯.. 几乎就像一个魅力.. 我有一些显示谷歌地图的内容，在这些页面中滚动看起来有些倾斜，仍在调查。但是非常感谢您提供了一个很好的想法：P
完美！这也是我对演示所做的，所以我会更新答案，以便其他人也可以使用它。

【解决方案2】：

不是phonegap的问题。实际位置：固定在小于 4.0 的 android 版本中不起作用有一个快速的 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; }

【讨论】：

【解决方案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，所以只使用上述内容来实现我所追求的。

希望有人会觉得这很有帮助。

【讨论】：