iPadでtouchmoveイベントで画像を移動

Question

私はiPhoneとiPad用に適応しようとしている固定背景画像を持つウェブサイトを持っています。私は運がない様々なラッパーを試しました。一方向にスクロールできない、またはサイトが正しくスクロールしない（動的Ajaxを使用するため）だから私は、ページのスクロールで画像の背景を移動する方法があった場合は探し始めたと私は次のように使用：

$(document).bind('touchmove',function(e){ 
    $('.background_image').css({top: $(document).scrollTop()}); 
$('.background_image img').css({top: $(document).scrollTop()}); 
console.log($('.background_image img').css('top')); 
}); 

$(document).bind('scroll', function() { 
    $('.background_image').css({top: $(document).scrollTop()}); 
    $('.background_image img').css({top: $(document).scrollTop()}); 
}); 

これは、最初の「タッチ」のために動作するようだが、背景には、次にません継続的に動く。移動をやめると「スクロール」バインドが始まり、正しい場所に画像が移動します。 これは可能な偉業なのか、ここでは不可能なことを達成しようとしていますか？出力を記録すると、CSSが実際に変更されているが、画面は更新されていないことがわかります。

UPDATE

ことができますが、ここで私が現在使用しているHTML/CSSであれば、私は知らない。

<div class="background_image"> 
    <img src="image.jpg" /> 
</div> 

.background_image { 
position: fixed; 
left: 0px; 
top: 0px; 
overflow: hidden; 
z-index: -1; 
} 

.background_image img { 
position: fixed; 
overflow: hidden; 
top: 0px; 
left: 0px; 
background: white; 
} 

も少し簡単に何かに私のコードを変更しました。

乾杯、

ダン

Answer 1

これは、最初の「タッチ」のために動作するようだが、背景は、その後継続的に移動しません。移動をやめると「スクロール」バインドが始まり、正しい場所に画像が移動します。これは可能な偉業なのですか、ここでは不可能なことを達成しようとしていますか？出力を記録すると、CSSが実際に変更されているが、画面は更新されていないことがわかります。

残念ながら、これは現時点ではiOSデバイスでは不可能です。私はiOSに最適化されたサイトのためにしばらくjQuery Mobileを使用してきましたが、これは大きな欠点の1つです。 jQueryのモバイルチームは、このような問題を説明し（hereを参照してください。）：iOSデバイスは、ときに、スクロール終了適用するためにそれらをキューイング、スクロール時にDOM操作を凍結することを

注意を。

これは、観察している動作の理由です。スクロールが完了すると、イベントがキューに入れられ、bgイメージが更新されます。 iScrollを使用することでこの問題を解決できる可能性があります。これは、目的のタスクにとって価値があるかどうかわかりませんが、選択したコンテナのネイティブスクロールハンドラを完全に置き換えます。

Answer 2

私たちは解決策の解決策をとることを決め、iPhoneのための写真を実装して、指定された背景色になるまでフェードアウトしました。