3

iPhoneアプリにUIWebViewを埋め込んでいますが、スクロール可能な中央のDIVを使用して、ロックされたヘッダーとフッターのDIVを常にページ上に保持したいと考えています。

UIViewコントロールであるヘッダー/フッターを使用してこれを行うことができることは知っていますが、純粋なHTML / JS/CSSソリューションをAndroid/PalmPre / Adob​​eAirに移植する方が簡単なので、ヘッダーとフッターをHTMLdivにします。これは、比較的すぐに私のToDoリストに追加される予定です。

私はここで言及されているようなテクニックを使ってこれを行うことができます：

http://defunc.com/blog/?p=94

しかし、これにはユーザーがdivをスクロールするために2本の指を使用する必要があります。これは私には満足のいくものではありません...

これを行う方法について何か提案はありますか？

ありがとう、

ブラッド

4

7 に答える 7

2

これはあなたが探しているものですか？iPhone デバイスまたはシミュレーターでこのリンクを開きます。

index.html ファイルには、body の直下に「header」、「container」、「footer」の 3 つの div 要素があり、すべての作業は fixed.js ファイルで行われます。ドキュメントは、「touchmove」イベントの通常のアクションをキャンセルすることで固定されます。

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

次に、「container」の下の「content」div にアタッチされた「touchstart」、「touchmove」、および「touchend」イベントのイベント リスナーを作成するために多くの作業が行われます。ロジックは、「コンテンツ」の div を上下に移動するだけです。

このソリューションは 100% HTML/CSS/JavaScript ですが、移植性を制限する WebKit 独自の CSS と JavaScript がいくつかあります。別のモバイル デバイスで動作させるには少し調整が必要になる場合がありますが、これは最初の概念実証としては適切です。

このすばらしいサンプル プロジェクトを作成したのは私ではありません。単にコミュニティの注意を引くだけです。詳細と圧縮されたプロジェクトへのリンクについては、Richard "Doctyper" Herrara のFixed position in Mobile Safariに関する投稿全体を参照してください。

于 2009-05-10T03:03:53.017 に答える
1

不格好かもしれませんが、ユーザーがスクロールするときにヘッダーとフッターを div の上に再配置できます。このようにして、メインの div をスクロール可能にする必要はありません。ただし、フレームを使用しても（まだ）何の助けにもなりません。

これは、iPhone/タッチのブラウザの問題の 1 つです。通常のブラウザのように、ページの一部に集中していただければ幸いです。

于 2009-03-05T15:58:59.690 に答える
0

私はiphoneにiScrollを実装しました、そしてそれは本当にスムーズで速いです、そしてあなたはあなたが望むことを何でもすることができます。欠点は、android（1.6）が私が望むようにスクロールすることを拒否し、他のjavascriptがある場合はそれをブロックすることがあることです。

于 2010-06-30T14:04:26.120 に答える
0

CSS のみのリファレンスについては、Safari CSS リファレンスに探しているものが含まれている可能性があります。「-webkit」または「-khtml」で始まるものは、3D や touches などの WebKit でのみ使用可能な拡張プロパティであるため、特に興味があるでしょう。Androidにも適用する必要があります。

JavaScriptを使用する場合は、 WebKit DOM プログラミング トピックの紹介とWebKit DOM API リファレンスが頼りになるガイドです。間違いなくライトテーブルのデモを見て、タッチを処理するためのJavaScriptをコピーして貼り付けてください。それが私がこれを解決する方法です。

于 2009-03-17T18:00:35.583 に答える
0 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

それらを html コードに追加すると、問題が解決する場合があります。

于 2014-03-11T10:18:21.330 に答える