4

在花了 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 重新计算点击区域？

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

4

3 回答 3

4

因此，受此链接的启发，我快速了解了如何在没有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;
}
于 2013-10-02T07:34:37.617 回答
1

不是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; }
于 2013-10-03T03:39:20.953 回答
0

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

使用 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，所以只使用上面的来实现我所追求的。

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

于 2018-07-03T14:17:55.590 回答