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

フォンギャップの問題ではありません。実際の位置: 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-03T03:39:20.953 に答える