スクロールストップを通知するjQueryイベントの作り方

20150116

はじめまして、こんにちは。エンジニアのハルです。
Web開発で必要になったものを紹介していきます。

動きのあるWebページを作成していると、スクロールが止まった時に処理を動かしたいときがあります。しかし、残念なことに標準のイベントにはスクロール終了、停止時のイベントが用意されていません。

そこで今回は次のように簡単に実装できる、スクロールが停止した際のイベントの作り方を紹介します。

$(window).on("scrollstop",function(){
  console.log("スクロールが停止しました。");
});
作り方
1.jQueryイベントオブジェクトを作成

スクロールストップ用のjQueryイベントオブジェクトを作成します。
イベント名は任意ですが、ここでは scrollstop とします。
var scrollStopEvent = new $.Event("scrollstop");

2.スクロールストップ判定用の関数を作成

スクロールが停止したことを判定し、作り方1で作成したイベントを発火する関数を作成します。
この関数では setTimeout によりイベントの発火を遅延実行する処理と、イベントの発火を clearTimeout によりキャンセルする処理を記述しておきます。
function scrollStopEventTrigger(){
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function(){$(window).trigger(scrollStopEvent)}, 200);
}

3.スクロールイベントに2の関数をバインド

スクロールイベントに作り方2で作成した関数をバインドし、スクロール中に連続して呼び出されるようにします。
そうすることでスクロール中はイベントの発火が clearTimeout によりキャンセルされ続け、スクロールが停止し、遅延時間が経過した場合のみイベントが発火される仕組みができあがります。
$(window).on("scroll", scrollStopEventTrigger);

4.完成型

作り方1~3の処理をまとめ、外部JSファイルにします。
ここではさらにスマートフォンのスクロールにも対応するため、touchmove イベントにも作り方2の関数をバインドしています。

scrollStopEvent.js
$(function(){
  var scrollStopEvent = new $.Event("scrollstop");
  var delay = 200;
  var timer;

  function scrollStopEventTrigger(){
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function(){$(window).trigger(scrollStopEvent)}, delay);
  }
  $(window).on("scroll", scrollStopEventTrigger);
  $("body").on("touchmove", scrollStopEventTrigger);
});
呼び方
次のように作り方4で作成したJSファイルを読込、スクロールストップ時の処理を記述します。
<script type="text/javascript" src="js/scrollStopEvent.js"></script>
<script type="text/javascript">
$(function(){
  $(window).on("scrollstop",function(){
    console.log("スクロールが停止しました!");
  });
});
</script>

デモ

サンプルのダウンロード
最後に
いかがでしたでしょうか。
同じ仕組みで画面リサイズが終了した際のイベントなども作成することができます。

プログラミングはちょっとした工夫で便利なものが作成できるのが楽しいですね。
車輪の再発明になってしまう場合もよくありますが、その仕組を知ることは良い刺激になるのではないでしょうか。

それではまたの機会に⊂二二二( ^ω^)二⊃

株式会社ライズウィル

株式会社ライズウィル

〒110-0016
東京都台東区台東1-27-11 やわらぎビル2F
TEL : 03-4590-3200
FAX : 03-4590-3201
E-Mail : info@risewill.co.jp
URL : http://www.risewill.co.jp

海上コンテナ輸送管理システム「海コン魂!」
海コン魂!
面接予約・スタッフ管理システム「WebWORKS.」
WebWORKS.