jQueryでスクロール方向判定の感度を落とす

ヘッダーやフッターのメニューの表示・非表示をスクロールの方向で切り替えるサイトをよく見かけます。このサイトもそうです。

このようなスクロール方向に動作を切り替えるのはjQueryを使うと簡単にできます。jQueryのコードは、検索すると簡単に見つかります。そのコードを実際使ってみるとスマホだとチョットした動きに反応し過ぎて結構うるさく感じます。

この部分は前々からどうにかならんのかな？と思っていた部分です。

この記事では、jQueryでスクロール方向の判定をするときにある程度同じ方向にスクロールしたかどうか判定する方法についてまとめておきます。

この記事で分かること

よく見かけるスクロール方向判定コード
ある程度一定の方向にスクロールしたかどうかを判定するには？
まとめ

よく見かけるスクロール方向判定コード

よく見かけるスクロール判定コードはコレです。

  //下にスクロールで管理パネルを隠す
  //上にスクロールで管理パネルを表示
  var adminMenu = $("#admin-panel");
  var adminHeight = adminMenu.outerHeight();
  var adminStartPos = 0;
  $(window).scroll(function(){
    var adminCurrentPos = $(this).scrollTop();
    if (adminCurrentPos > adminStartPos) {
      if(adminCurrentPos >= 200) {
        adminMenu.css("bottom", "-" + adminHeight + "px");
      }
    } else {
      adminMenu.css("bottom", 0);
    }
    adminStartPos = adminCurrentPos;
  });

このコードは、スクロールイベントが発生するたび、どちらにスクロールしたか判定します。検証ツールで確認すると結構重いコードです。

それはさておき、このコードは前回のイベント発生時の位置と今回のイベント発生時の位置を比較しているので、前回の位置しか記憶していません。それだと、スクロールが一定方向に連続したかどうか判定できません。

ある程度一定の方向にスクロールしたかどうかを判定するには？

あるイベントが発生した時に、それ以前の履歴を確認してあげればよさそうです。

  //下にスクロールで管理パネルを隠す
  //上にスクロールで管理パネルを表示
  var adminMenu = $("#admin-panel");
  var adminHeight = adminMenu.outerHeight();
  var adminStartPos = 0;
	var Upcount = 0;//追加
	var Downcount = 0;//追加
  $(window).scroll(function(){
    var adminCurrentPos = $(this).scrollTop();
    if (adminCurrentPos > adminStartPos) {
Upcount = 0;//追加
Downcount = Downcount + 1;//追加
      if(adminCurrentPos >= 200 && Downcount > 10 ) {
        adminMenu.css("bottom", "-" + adminHeight + "px");
      }
    } else {
Downcount = 0;//追加
Upcount = Upcount + 1;//追加
if( Upcount > 10 ){
      adminMenu.css("bottom", 0);
}
    }
    adminStartPos = adminCurrentPos;
  });

そのため、上スクロールと下スクロールが発生した回数をカウントする変数を用意します。

スクロール方向が同一の間はイベントごとにカウントアップし、反対方向のカウンタはリセットします。

それぞれのカウンタの値が一定値以上であるかどうか判定することで、動きの切り替わりの感度を下げることができます。