2012-06-14 11 views
5

視差のある街頭のシーンを作成しました。アーカイブ済みのバージョンについては、hereを参照してください。Androidブラウザのスクロールイベントが発生しません。対処が必要です

すべての主要なデスクトップブラウザとSafari Mobileでうまく動作します。 Mobile FirefoxやAndroid用Chromeでもうまく動作します。ただし、デフォルトのAndroidブラウザではスクロールイベントに問題があります。私にはっきりさせてください。スクロールは問題ではありません。 divは必要に応じてスクロールします。スクロールイベントは発生しません。この問題はICSだけでなくHoneycombでも発生します。

私は他のモバイルブラウザについては心配していません。なぜなら、モバイル画面サイズの場合、通常、視差のシーンは表示されないからです。 mediaqueriesと条件付きのJavaScriptの読み込みがそれを処理します。レスポンシブなデザインとそのすべてのジャズ。

基本的には、位置と「奥行き」に基づいて各画像を配置するparallise()jQueryプラグインを作成しました。この関数は、スクロールイベントにバインドされています。

Androidブラウザでは、このイベントは、次のタッチの開始時にを起動します。、連続してではなく、

私はおそらく、私がtouchstarttouchmove、およびtouchendのイベントに関数をバインドすると、私は私の問題を解決するだろうと思った。葉巻はありません。 Other touch events are also bugged.提案された回避策を適用するとイベントが発生しますが、e.preventDefault()にあるように、スクロール(練習問題全体)が無効になります。

ステージdivの位置をウィンドウdivに対して相対的にポーリングするとどうなりますか?次のタッチの開始時に位置情報が更新されるのはです。

私はテザーの最後です。どんな助けでも大歓迎です。

+0

[OK]を、私は別のサイトのためのテストドメインを使用する必要があります。もし誰かがこの問題を助けたいと思っているなら、コメントを残してください。私はもう一度言います。このサイトは[smartdevice.co.za](http://smartdevice.co.za)でも公開されていますが、ビューポートは '960px'に設定されていません。私たちはクライアントに、これが私たちが制御できないブラウザの問題であることをほとんど話しました。この問題の影響は、デフォルトのブラウザのみを実行するAndroidタブレットに限られています。 しかし、後世のために、解決策が分かっている場合は、コメントを残してください。 –

+0

この問題を解決したことがありますか? – IamDeveloper

+0

残念ながら。ほとんどのタッチイベントで使用されているコードは、期待通りに動作しないため、回避策を作成することは不可能です。何らかの点でタッチイベントに依存するためです。私がクライアントを解雇したとき、以前のコメントに記載されているサイトには私のコードは含まれていません。サイトのコピーはhttp://xandor.co.za/smartdeviceにあります。 –

答えて

1

Androidの迷惑バージョンでタッチイベントが正しく機能していて、ドラッグ中にネイティブスクロール位置を効果的に追跡できたとしても、エラーが発生しやすくなります。例えば、タッチが終了した後に起こる運動量アニメーションを説明しない。

iOSとAndroidは、スクロールのパフォーマンスを向上させるために犠牲をしています。どちらのプラットフォームでも、スクロールが完了するまで正確なスクロール位置を取得することはできません。モーメンタムアニメーションが終了するまでスクロールイベント(<body>)は発生しません。あなたの元の質問は、あふれている<div>のスクロールイベントに関するものですが、これを修正することは、あなたにとってはまったく役に立たないかもしれません。

スクロールに合わせてアニメーションを更新するには、ブラウザのネイティブスクロールではなく、プログラムでスクロールを実行する必要があります。これを行うのに最適なライブラリはiScrollです。 this demoのように、視差効果を非常に簡単に達成できます。

より複雑なエフェクト(例ではウォーキングキャラクター)が必要な場合は、iScrollの「プローブ」バージョンを選択して、スクロール位置をピクセル完全にポーリングすることができます。

しかし、多くの欠点がiScroll使用にあります。

  • あなたが使用することは困難かもしれあなたのマークアップと
  • これでデスクトップブラウザのため、不要なオーバーヘッドが、原因へのマークアップの変更をスタイリングを変更する必要がありますフォールバックとしてのみ
  • スクロールは、通常は優れたスクロールパフォーマンスを備えたiOS上では完全には感じられません。勢いの計算にわずかな違いがあります。 Androidでは、スクロールが通常よりも遅くなることがあります。 touchstart上でpreventDefaultを必要としません
関連する問題