RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

イベント詳細についてはこちらをクリック

jQueryでスクロール位置を取得するときに困った話

はじめに

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

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

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

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

対象要素.scrollTop();

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

$(window).scrollTop();

うまくいかなかったこと

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

すると、EdgeとSafariでは、正しい値を取得できていましたが、ChromeIEFirefoxでは、常に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で実装したときはしっかりマルチブラウザでテストすることを心がけていきたいと思います。

Copyright © RAKUS Co., Ltd. All rights reserved.