お問い合わせはコチラから

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;
  });

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

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

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

まとめ

jQueryは気軽に使えるのですが、スクロールイベントの場合は処理が重くなります。最近はPCの性能も高いので昔ほどJavascriptの影響はありませんが、必要最小限で済ませたいのが本音ではあります。

今回の内容はスマートな内容ではないですが、取りあえずの解決策として使えなくはないと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました