スクロールが特定の位置に到達したときに現在のアニメーションを実行する必要があります。このアニメーションは footer 内にあり、ウェブページの本体は ajax を使用してレンダリングされます。私は JavaScript で ajax を呼び出してデータをレンダリングし、次に本体の高さを取得し、その高さにスクロールしたときにアニメーションを実行します。
ローカルでテストしたところ、問題はありませんでした。必要な効果がすべて得られました。サーバーにテストしたところ、どのように書いても、まず本体の高さを取得し、その後データをレンダリングします。したがって、高さは極めて小さな値であり、私が望む属性には合いません。
私はおおよそ 2 つの解決策を考えましたが、どちらも失敗しました。ローカルでは ajax が最初に実行され、サーバーでは JavaScript が最初に実行されます。
- 高さを取得するイベントを 500ms 遅延させると、最終的にイベントを取得できなくなりました。
- このイベントを ajax の success コールバックに書いたところ、最初にウェブページを開いたときだけ成功し、その後何度リフレッシュしても無効であり、イベントがブロックされるため、方法 2 も廃止されました。
最後に、ajax は非同期メソッドではないですか、それを同期に変更すればいいのではないかと思いつきました。最初に ajax を実行してから JavaScript イベントを実行します。
async: false,
私は ajax 内で async というメソッドを書き、 false はデフォルトで同期的にデータを取得することを意味します。素晴らしい、サーバーに戻ってコンソールを開くと、データがまずレンダリングされ、その後本体の高さが取得されることがわかりました。問題は解決されました。
もちろん、これには欠点があります。インターフェースに問題がある場合、ajax のレンダリングが失敗すると、ウェブページ全体の JavaScript が実行されません。ただし、データがレンダリングできない状況に本当に到達した場合、ウェブページにアクセスする意味がなくなると考えられるため、最終的にこの方法を採用しました。