JavaScriptのDOM移動が携帯端末でスクロールが終了するまで遅れる

Question

モバイルSafariでは、要素のtouchmoveを処理する過程で、その要素のclassNameを変更します。残念ながら、視覚的変化は、ユーザがスクロールしている間、または慣性スクロールの最後までは発生しない。

classNameをすぐに視覚的に撮影するにはどうすればよいですか？

より：どうやらこれはクラス名の変更に限定されるものではなく、一見などinnerHTMLやstyleとしてDOMへの変更、。

Answer 1

これは残念ながら設計によるものです。 iOSのサファリはスクロールまたはジェスチャーが終了するまですべてのDOM操作をキューに入れます。効果的に、DOMはスクロール中に凍結されます。

アップルの開発者ページでこれを参照できると思っていましたが、jQueryMobileへのリンクはhttp://jquerymobile.com/test/docs/api/events.htmlしか見つかりませんでした。

スクロール中にiOSデバイスがDOM操作をフリーズすると、スクロールが完了したら キューイングが適用されます。現在、調査中です スクロールが開始される前にDOM操作を適用する方法

希望します。

Answer 2

私は実際にそのサイトを構築しましたが、はい、この制限を回避する方法は、組み込みのブラウザ機能を使用してサイトをスクロールせず、偽装することです。 JSはホイールイベントとキーボードイベントをスクロールし、メインコンテナのCSSプロパティを自身の 'scrollTop'にトゥイーンします。もちろん、右側のスクロールバーはカスタムJSです。この場合、同じ内部 'scrollTop'値に同期されます。

サイト全体が1つの大きなトゥイーンにすぎず、メインのタイムラインはscrollTopの位置にあり、すべてのサブアニメーションは特定のタイミングでトリガーされます。 JSは縮小されていないので、ScrollAnimator.jsファイルを見てください。

Answer 3

位置を-webkit-stickyに変更するだけです。 topを設定しないでください。通常の要素のように見えますが、固定要素のように動作します。そして、あなたはその位置をすぐに更新することができます。