scrollTopの罠

【jQuery3.3.1 JavaScript】

jQueryで画面をスクロールさせたりするというのはよくある話。ところが、ブラウザ間誤差でハマるケースを紹介しておく。
まぁ、これもいろいろなところで記載されている話な気がするのでメモ程度だが。

画面全体のスクロールについて、IE,Edgeとそれ以外で仕様が違っているようだ。下記のような形で簡単なテストができる。

$(function(){
    $(document).on("click","html",function(e){
        console.log("A:"+$("html").scrollTop());
        console.log("B:"+$("body").scrollTop());
    });
});

画面全体のスクロール量をconsoleに書き出すのだが、デフォルトの状態の場合、実際そのスクロールはhtmlでされているのか、bodyでされているのかを調べてみる。※クリックするとスクロール量が表示される。

その結果、IE,Edgeではbody、Chrome,FFではhtmlがスクロールしているという結果が得られた。つまり、画面全体のスクロール量を取得設定する場合、ブラウザ間誤差を吸収しなくてはいけない。例えば、

var sc = ($("html").scrollTop() > 0) ? $("html").scrollTop(): $("body").scrollTop();

このようにして、ブラウザ間誤差を埋める。(スクロール量は必ず正の値を取る)

逆に、スクロール設定する際はhtml,bodyのいずれかが必ず0になってしまうことを利用して、

＄(”html， body”).scrollTop(sc);

のように設定してあげれば、簡単に設定できるはずだ。

あまり使わないと思うが、scrollLeftでも同様の問題が発生することだろう。
最初の簡単なテストのようにしてみれば、問題の原因が洗い出せるはずだ。

それでは、
Enjoy jQuery !