jQueryMobileのスタイルシートから-downおよびCSSスタイルを削除できます。-hoverリストをスクロールすると、リストアイテムの上に指を「置いた」状態になり、-hover適用されているクラスによってスタイルが変更されます。-hoverクラスをクラスと同じになるように変更する-upと、再描画は発生せず、スクロールがはるかにスムーズになります。私はこれをテストしました、そしてそれは私のAndroid2.3デバイスでうまくいきました。
これが私の言いたいことの例です。クラスルールの//バージョンに-up注意して-downください。-hover
.ui-btn-up-a {
border: 1px solid #222 /*{a-bup-border}*/;
background: #333333 /*{a-bup-background-color}*/;
font-weight: bold;
color: #fff /*{a-bup-color}*/;
text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}
.ui-btn-hover-a {
border: 1px solid #000 /*{a-bhover-border}*/;
background: #444444 /*{a-bhover-background-color}*/;
font-weight: bold;
color: #fff /*{a-bhover-color}*/;
text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
}
.ui-btn-down-a {
border: 1px solid #000 /*{a-bdown-border}*/;
background: #3d3d3d /*{a-bdown-background-color}*/;
font-weight: bold;
color: #fff /*{a-bdown-color}*/;
text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
}
アップデート
したがって、変更を加えるには、jQuery Mobileフレームワークをダウンロードし、縮小されていないバージョンのCSSスタイルシート（http://code.jquery.com/mobile/1.0/も参照）を開くだけの簡単な方法を提案しました。 jquery.mobile-1.0.css）、-downおよび-hoverクラスを削除します。
jQuery Mobileはここからダウンロードできます：http：//jquerymobile.com/download/
.ui-btn-***-*基本的に、すべてのクラス宣言を探し、***等しいhoverまたはdownであるものの中のコードを削除します。テーマごとに1つあるため、複数になります。これが最後の*目的ですa-e。
完了すると、上記のCSSは次のようになります。
.ui-btn-up-a {
border: 1px solid #222 /*{a-bup-border}*/;
background: #333333 /*{a-bup-background-color}*/;
font-weight: bold;
color: #fff /*{a-bup-color}*/;
text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}
.ui-btn-hover-a {}
.ui-btn-down-a {}
クラスには何もしなかったことに注意してください.ui-btn-up-a。これはデフォルトのクラスであり、ページの外観を変更したくありません。リストをスクロールするときにブラウザがドキュメントを再描画しないようにしたいだけです。
CSSスタイルシートの編集がすべて完了したら、コードをコピーしてhttp://htmlcompressor.com/compressor.htmlに貼り付け、右側の[CSS]オプションを選択して、[圧縮]をクリックします。これにより、本番環境で使用できるCSSスタイルシートの縮小バージョンが作成されます（これにより、コードのサイズが大幅に削減されます）。