2

スクロール効果を実現するために、Web ページで次のように変換プロパティを操作しています。

element.style.webkitTransform = "translate(0px, -"+scrollY+"px)";
snapShotPage();

ほとんどのブラウザー (私の経験から Webkit を含む) では、スクリプトの実行が終了して視覚的な変更が行われるまで待機することを知っていますが、私の場合は、正確なスナップショットを取得するために、再描画/再描画が発生した後snapShotPage()に実行する必要があります。これを行う方法はありますか？

を使用するとこの動作が発生することに気付きscrollTopましたが、私の場合はオプションではありません。の使用を避ける解決策はありsetTimeoutますか?

4

1 に答える 1

4

それはいつものようです - >コード - >レイアウト - >ペイント

コードの一部が描画結果に基づいている場合は、それをシフトする必要があります。ブラウザーの描画作業は同期ワークフローの一部ではないため、イベント キュー用に 2 番目のコード ブロックが必要です。

解決策 1:

window.setTimeout(snapShotPage, 0);

解決策 2:

requestAnimationFrameを使用して、次のフレームで snapShotPage 関数を呼び出します。

解決策 3:

DOM イベントに反応し、 MutationObserverを介して snapShotPage 変更イベントを呼び出します

于 2013-06-19T07:31:56.527 に答える