2014-01-18 7 views
10

iOS WebViewに表示されるJQuery 1.4で書かれたマルチページアプリがあります。それは静的なヘッダーを使用し、コンテンツに埋め込まれた画像とテキストを持つ20個程度のdivがあります。私はPhoneGapを使用していません。iOSでスムーズにスクロールしない

SafariのWebView では、コンテンツを縦方向にスクロールすることはできますが、iOSアプリケーションと同じ滑らかさは得られません(指が上がった後もスクロールが少し続きます)。 = "滑らかな"スクロール)。指が画面の外に出たときにスクロールが止まります。

JQuery Mobileでスムーズにコンテンツをスクロールするための設定や問題はありますか?

答えて

0

おそらく、問題は、それらの画像/ divをペイントするために多くの処理能力を必要としていることです。ファイルを圧縮しましたか?

あなたがより多くのためにここで読むことができます。

画像圧縮 http://www.html5rocks.com/en/tutorials/speed/img-compression/ **あなたが問題 http://www.html5rocks.com/en/tutorials/speed/css-paint-times/ 原因

CSSペイントタイムズを使用することができるアプリへのリンクは下へスクロールを**クリックしてくださいペイント時間をプロファイルする方法を知るために、最下部のリンク「Continuous Paint Times」をクリックします。

希望すると便利です。

+0

ありがとうございました。おそらくそれは問題ですが、スクロールすると実際には指が倒れている限り正常に動作します。ジッタや何もありません。 問題はスワイプの後です。スクロールはただ停止し、スワイプの勢いに従いません(ほとんどのネイティブスクロールビューと同じように)。 – dixkin

0

あなたは、コンテナに、いくつかのスクロールアクティビティを追加するデイブ・テイラーのjqueryの運動ライブラリを使用しようとすることができます: http://davetayls.me/jquery.kinetic/

18

私はそれはあなたがもはや<body>要素をスクロールしているという事実に関係しています考えるのではなく、 JQuery Mobile Pageをダウンロードしてください。 <div>をJQuery Mobileなしでスクロール可能にすると、この不安定な経験を再現できるはずです。

何を探してるんですが実際をスクロール勢いと呼ばれ、時には慣性スクロールと呼ばれています。

おそらく、運動量のスクロールを追加したいdivにCSSのプロパティ-webkit-overflow-scrolling: touch;を追加できるはずですが、これはうまくいくはずですが、私はこれを動作させることができませんでした。私は体にそれを追加しようとしたと私は右のスクロールを得ることができたが、私の固定ヘッダーは、私がスクロールしながら飛び跳ね始めた。

固定ヘッダーがない場合は、自由にお試しください。

body { 
    -webkit-overflow-scrolling: touch;  
} 
+0

私の場合は、他の誰かがこのアプリケーションで作業していましたが、この悪い経験を引き起こした悪いCSSルールを適用しました。私はJQuery Mobile CSS以外のすべてのCSSを取り除いてこれを発見しました。その後、悪いルールが見つかるまで、残りのカスタムCSSをゆっくりと追加しました。かなりイライラしましたが、同じプロジェクトで複数の人々が作業していた結果です。最初はJQuery Mobileだと思った理由は、JQuery Mobileを削除しようとしていて、アプリがなくても正常に動作したからです。だから私は2つのルールが競合していたと思う。 –

+0

チャンピオン!これは大変助けになりました。 –

+0

それは私にとっても助けになりました。ありがとう、スコット!プロジェクトで「悪いルール」と特定したことをさらに教えてください。 – marcel

0

多くのプラットフォームで動作するnicescrollプラグインを使用できます。

インストール:

<script src="jquery.nicescroll.js"></script> 

用途:

$(document).ready(

    function() { 

    $("html").niceScroll(); 

    } 

); 

ここでは、私たちのためにnicescroll plugin

3

の基準とされ、問題は、jQueryのモバイルのCSSにあった、とこのように修正しました:

.ui-mobile .ui-page-active{display:block;overflow:visible;/*overflow-x:hidden*/} 

私たちのスクロールエラーを修正しました。

overflow-x: hidden messed things up。

+1

誰もがこの問題を抱えているので、まずこれを試してみてください! – leymannx

+1

私の場合、この方法が有効です。ありがとう。 –

関連する問題