ページのスクロール量を取得しようとしてハマった話 #JavaScript

発生した問題

下記のコードで実装後ブラウザ間で動く動かない問題が生じた


$(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 380) {
      $('.adsense').addClass('show');
    }
  });
});

scrollTop()を使いスクロール量を取得しようとしていたが、未対応ブラウザが多かった。
https://chaika.hatenablog.com/entry/2017/09/22/090000

解決策

pageYOffsetを使う。
こっちの方が対応範囲が広い。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Window/pageYOffset/
IE9以前はデフォルトでaddClass("show")する。

$(function() {
  $(window).scroll(function () {
    if (window.pageYOffset > 380) {
      $('.adsense').addClass('show');
    }
    // 未対応ブラウザ(ie9以前)の場合
    if (window.pageXOffset == undefined) {
      $(".adsense").addClass("show");
    }
  });
});