はじめに

こんにちは、新卒2年目のmrym_618です。最近、jQueryでスクロール位置の取得する方法を実装しましたが、なかなかうまくいきませんでしたので、そのときのことを書いていきたいと思います。

はじめに
jQueryでスクロール位置を取得する方法
うまくいかなかったこと
おわりに

jQueryでスクロール位置を取得する方法

jQueryでスクロール位置を取得するには、「scrollTop()」メソッドを使用します。

「scrollTop()」メソッドの記述方法は以下の通りです。

対象要素.scrollTop();

ブラウザ全体のスクロール位置を取得するには対象要素にwindowを指定します。

$(window).scrollTop();

うまくいかなかったこと

今回は、対象要素にbodyを指定して実装していました。

すると、EdgeとSafariでは、正しい値を取得できていましたが、ChromeとIEとFirefoxでは、常に0を取得していました。

原因は、以下のサイトの通りブラウザによって「scrollTop()」メソッドが効くタグが違うことでした。

chaika.hatenablog.com

そこで、そのサイトを参考にブラウザごとに対象要素を判定するように実装しました。

      var ua = navigator.userAgent;
      var scrollTag;
      // Edge, Safariの場合 
      if(ua.indexOf('Edge') !== -1 || (!window.chrome && 'WebkitAppearance' in document.documentElement.style)) {
        scrollTag = 'body';
      // Chrome, IE, Firefoxの場合
      } else {
        scrollTag = 'html';
      }

おわりに

今回は、jQueryでスクロール位置を取得するときに困った話について書きました。もし、同じようなことで困っていれば、この記事が参考になれば幸いです。

また、jQueryには「scrollTop()」メソッド以外にもブラウザによって挙動が異なるメソッドはあると思うので、jQueryで実装したときはしっかりマルチブラウザでテストすることを心がけていきたいと思います。

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gle
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com