firefoxのみanimateが期待どおりの動作をしない。

Question

以下のようなjqueryがあり、
chrome,safariなどでは期待の動作をするのですが、
firefoxのみanimateが動作しません。

###現象
firefoxのみanimateで、スクロールされるはずなのですがスクロールされずに、ajaxで更新後下にスクロールした場合、scrollTopの位置までマウスカーソルが引っ張られてしまいます。
chromeの場合、animateの場所までスクロールが動くので、引っ張られる現象が起きません。
強制的にスクロールさせて、ajaxを呼ぶというコードです。
ajaxはよばれるのですが、firefoxのみスクロールせずajax更新後にスクロールをした際に、
animationで指定した位置に移動してしまいます。

  $(window).bind('scroll', function(event) {
          var scrollHeight = $(window).height();
          $('html,body').animate({scrollTop: scrollHeight*2 }, 500);
    }

Comments

[x_x]

期待の動作とはどのような動作でしょうか？

[usuallyi]

firefoxのみanimateで、スクロールされるはずなのですがスクロールされずに、ajaxで更新後下にスクロールした場合、scrollTopの位置までマウスカーソルが引っ張られてしまいます。

[usuallyi]

chromeの場合、animateの場所までスクロールが動くので、引っ張られる現象が起きません。

[kei344]

スクロールし始めたら特定の場所に強制的にスクロールさせる、というコードですか？また、この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

[usuallyi]

強制的にスクロールさせて、ajaxを呼ぶというコードです。ajaxはよばれるのですが、firefoxのみスクロールせずajax更新後にスクロールをした際に、animationで指定した位置に移動してしまいます。

[kei344]

順序が必要なら「ajaxを呼ぶ」のコードも提示されてはいかがでしょう。

Answer 1

ブラウザによって動くエレメントが違うために複雑化しますが、$('body,html').animateとすれば動くようにはなるとのことです。

ただし、.animate終了後のコールバックが2回実行される、という問題はあります。

StackOverflowの投稿

Comments

[usuallyi]

そのようにした場合でも、期待通りの動作をしません。

Answer 2

jQuery 1.7.0より.bind()は非推奨になっています。
代わりに.on()メソッド、もしくは.scroll()メソッドを利用してみてください。