この記事では、JS+HTML5携帯電話開発のためのスクロールおよび慣性緩和実装方法について説明します。次のように、参照のために共有してください。
1.次の3つの実装方法をスクロールします。
1）ネイティブCSS属性オーバーフローを使用：スクロールdiv id =親スタイル=オーバーフロー：スクロール; divid = 'content' content area /div /div通知：Androidにはバグがあり、スクロール後にトップコンテンツエリアに戻ります。解決策は、後者の2つの方法を使用して実装することです。
2）JSプログラミングの実装アイデア：画面上の指の前面と背面の位置の変更を比較して、コンテンツ要素コンテンツを変更します
1。スクロール
3つの実装方法は次のとおりです。
1）ネイティブCSS属性オーバーフロー：スクロールを使用します
<div id = "parent" style = "overflow：scroll;> <div id = 'content'>コンテンツ領域</div> </div>
知らせ：
Androidにはバグがあり、スクロール後、トップコンテンツ領域に戻ります。解決策は、後者の2つの方法を使用して実装することです
2）JSプログラミングの実装
アイデア：指が画面上で動く前後のコンテンツ要素の位置を比較してください
ステップ1：親のオーバーフローを非表示に設定し、コンテンツの位置を相対に、トップに設定します。
ステップ2：タッチイベントを聞いてください
var parent = document.getElementById（ 'parent'）; parent.addeventlistener（ 'touchstart'、function（e）{// touchStart}）; parent.addeventlistener（ 'touchmove'、function（e）{// touchmove}）; touchend}）; parent.addeventlistener（ 'touchend'、function（e）{// touchend}）;ステップ3：スクロールコードを実装します
/***ここに垂直スクロールのみが実装されます*/var parent = document.getElementById（ 'parent'）; var content = document.getElementById（ 'content'）var starty = 0; //初期位置var lasty = 0; // last position parent.addeventlistener（ 'touchstart'、function（e）{lasty = starty = e.touches [0] .pagey;}）; parent.addeventlistener（ 'touchmove'、function（e）{var nowy = e.touches [0] .pagey; var movey -lasty -lasty -lasty; content.style.top.replace（ 'px'、 ''）; nowy -lasty = content.top.replace（ 'px'）;ステップ4：最適化
上記のコードは携帯電話で実行されており、多くの結果が発生しています。
最適化については、以下をご覧ください。
3）ISCROLL4フレームワークを使用します
var scroll = new iscroll（ 'parent'、{hscrollbar：false、vscrollbar：true、checkdomChanges：true}）;フレームワーク公式ウェブサイト：http：//cubiq.org/iscroll-4
2。慣性緩和
アイデア：最後の期間中に画面をスワイプする指の平均速度Vを取得し、移動できないまでV <= 0になるまでVを減少させます。
/***ここに垂直スクロールのみが実装されます*/var parent = document.getElementById（ 'parent'）; var content = document.getElementById（ 'content'）var starty = 0; //初期位置var lasty = 0; // last position/*** easingの変数*/var lastmovetime = 0; var lastmovestart = 0; var stopinertiamove = false; // parent.addeventlistener（ 'touchstart'、function（e）{lasty = starty = e.touches [0] .pagey;/ *** easing code*/ lastmovestart = lastey; lastmovetime = e.timestamp || date.now（）; stopinatiamove = true; function {var nowy [0] e.timeStamp || now（）; contenttop.style.top.Replace（ ''）（Parseint）; （現在の時間 - lastmovetime）; inertiamove（）return = e.timeStamp | movey） + "px";PS：ここにいくつかのコードフォーマットと美化ツールがあります。私はあなたが将来の開発プロセスでそれらを使用すると信じています：
オンラインJavaScriptコードの美化とフォーマットツール：
http://tools.vevb.com/code/js
JavaScript圧縮/フォーマット/暗号化ツール：
http://tools.vevb.com/code/jscompress
JSONコードオンラインフォーマット/美化/圧縮/編集/変換ツール：
http://tools.vevb.com/code/jsoncodeformat
オンラインJSONコード検証、検査、美化、フォーマットツール：
http://tools.vevb.com/code/json
jQueryの詳細については、このサイトの特別なトピックをご覧ください：「一般的なプラグインの要約とjQueryの使用法」、「jQueryのajax使用法の概要」、「jqueryテーブル（表）操作スキルの概要」、jqueryドラッグアンドドロップエフェクトとテクニックの概要」、jquery expect of jquery expect of jquery expect of jquer使用法」と「jQueryセレクターの使用法の要約」
この記事がみんなのjQueryプログラミングに役立つことを願っています。