Phonegap 2.8位置：固定工作不正常

花了16个小时并牺牲了各种神灵的生灵后，我必须遗憾地说我正处于精神崩溃的边缘。Phonegap 2.8位置：固定工作不正常

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

最初我相信给header div添加“position：fixed”属性会很简单 - 我从来没有犯过更多错误。事实证明，位置：固定的CSS属性在WebView中无法正常工作，而且问题已经持续了多年。这个问题已经在各种论坛和文章中详细讨论过，并且已经提出了各种“解决方案”，但我的案例都没有。

我试图设置标题的位置固定滚动时，并确保滚动完成时。理论上它有效，但它是滞后的。试过之后，我研究了不同的插件或框架，可以帮助解决这个问题。 iScroll - 将指定的结构强制转换为html并严重缺乏文档，使我无法使用它。 jQueryMobile - 因为它是一个整体框架，所以将它集成到我的项目中意味着会改变很多东西。据我所知，它不会提供一个持久的标题。

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

使用jsHybugger我检查了标题，当它在位置：固定一个我已经注意到，覆盖在检查器中选定的div的蓝色框将停留在点击区域用于标题的地方。所以如果我滚动，标题移动与视口，但hitarea保持原位。这让我想知道，如果有办法强制WebView重新计算点击区域？

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

来源

2013-10-02 Erich Jagomägis

也许这个答案可以帮助：HTTP：//计算器。com/questions/14267527/uiwebview-and-css-fixed-position – mwfire

因此，受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; 
}

来源

2013-10-02 07:34:37 mwfire

我已经尝试过了，但我没有在我的android上得到滚动（Galaxy S2） overflow-y：scroll; :( –

让我来解释它，滚动存在，但它滚动整个页面不仅仅是我的内容div，因此我的标题滚动。 –

嗯，它可以在Android模拟器Webview中进行一些修改。 /www.mwfire.de/test/index.html和源代码。这是否工作？不能把小提琴，因为它不能在框架中工作... – mwfire

它不是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; }

来源

2013-10-03 03:39:20

Phonegap 2.8位置：固定工作不正常

回答

相关问题