1

いくつかのコンテキスト:特定の要素へのスクロールをアニメーション化しようとしています。これを実現するには、から次のコードを呼び出します$(document).ready()。

$('html, body').animate(                                                                      
  // properties                                                                                 
  {
    scrollTop: $("#element").offset().top                                 
  },
  // duration                                                                                   
  500,
  // easing
  "easeOutCubic"
);

私の問題は、一部の要素で$("#element").offset().topは、アニメーションを開始してからターゲット要素に到達するまでの間に実際に変化することです。

私の要素は完全に静的です。DOM 操作は実行せず、サイズも変更しません。CSS でサイズを指定し、 になるまで待って$(document).ready()、下にスクロールします。

私は何が間違っているのでしょうか？アニメーションの開始が早すぎますか、それともイベント ハンドラーが正しくありませんか? アニメーションの行為が何らかの形で要素の位置を変更している可能性はありますか?

おそらく関連するポイント:

  • Google Web フォントと複数の顔のスタイルを使用しています。おそらく、レンダリングのバグがありますか？
  • これをGoogle Chromeで実行しています。確認したところ、この問題は Safari では発生しません。編集：いいえ、Safariでも発生します。
4

2 に答える 2

1

これを調べたところ、Chrome タイムライン インスペクターは、アニメーションがトリガーされた後にフォントが受信されていることを明らかにしました。これは、選択したスクロールが、Google Web フォントが適用される前のターゲット要素の暫定的な位置に基づいていることを意味します。

ready()このコードを配置する場所ではないことは明らかです。私の次のステップは、適切な場所がどこにあるかを把握することです。

編集：

このコードを配置する正しい場所はloadハンドラーです。コードをそのメソッドに移動すると、この問題はなくなりました。

于 2013-08-17T19:40:19.233 に答える