web-dev-qa-db-ja.com

iOSではJQueryMobileのスクロールがスムーズではありません

JQuery 1.4で記述され、iOSWebViewに表示される複数ページのアプリがあります。静的ヘッダーを使用し、コンテンツには画像とテキストが埋め込まれた20程度のdivがあります。 PhoneGapを使用していません。

WebView and Safariでは、コンテンツを垂直方向にスクロールできますが、iOSアプリで得られるのと同じスムーズさは得られません（つまり、指が来た後もスクロールが少し続きます） up =「スムーズ」スクロール）。指が画面から離れると、スクロールが停止します。

JQuery Mobileでのコンテンツのスムーズなスクロールに関して、私が知らない設定や問題はありますか？

jqueryiossmooth-scrolling
12
dixkin

<body>要素ではなく、JQueryMobileページ<div>をスクロールしているという事実に関係していると思います。 JQueryMobileなしで<div>をスクロール可能にすると、この途切れ途切れのエクスペリエンスを再現できるはずです。

あなたが探しているものは実際には運動量スクロールと呼ばれ、慣性スクロールとも呼ばれます。

おそらく、モメンタムスクロールを追加するdivにcssプロパティ-webkit-overflow-scrolling: touch;を追加でき、機能するはずですが、ページ<div>でこれを機能させることができませんでした。 。本体に追加してみたところ、右スクロールができましたが、スクロール中に固定ヘッダーが飛び回り始めました。

固定ヘッダーがない場合は、気軽に試してみてください。

body {
    -webkit-overflow-scrolling: touch;    
}
20
Scott David Murphy

私たちにとって、問題はjQuery MobileのCSSにあり、次のように修正しました。

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

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

overflow-x: hiddenめちゃくちゃなこと。

3
EpicPandaForce

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

詳細については、こちらをご覧ください。

画像圧縮 http://www.html5rocks.com/en/tutorials/speed/img-compression/ **使用できるアプリへのリンクについては、下にスクロールしてください

CSSペイント時間が問題を引き起こす http://www.html5rocks.com/en/tutorials/speed/css-Paint-times/ **下部にある[ContinuousPaintTimes]リンクをクリックしてくださいペイント時間をプロファイリングする方法を確認します。

お役に立てれば！

0
dustinhorn

Dave Taylorのjqueryキネティックライブラリを使用して、コンテナにスクロールアクティビティを追加することができます： http://davetayls.me/jquery.kinetic/

0
user3011237

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

インストール：

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

使用法：

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

これが nicescrollプラグイン のリファレンスです

0
Shoaib Chikate