Web開発で必要になったものを紹介していきます。
動きのあるWebページを作成していると、スクロールが止まった時に処理を動かしたいときがあります。しかし、残念なことに標準のイベントにはスクロール終了、停止時のイベントが用意されていません。
そこで今回は次のように簡単に実装できる、スクロールが停止した際のイベントの作り方を紹介します。
$(window).on("scrollstop",function(){
console.log("スクロールが停止しました。");
});
作り方
１．jQueryイベントオブジェクトを作成スクロールストップ用のjQueryイベントオブジェクトを作成します。
イベント名は任意ですが、ここでは scrollstop とします。
var scrollStopEvent = new $.Event("scrollstop");
スクロールが停止したことを判定し、作り方１で作成したイベントを発火する関数を作成します。
この関数では setTimeout によりイベントの発火を遅延実行する処理と、イベントの発火を clearTimeout によりキャンセルする処理を記述しておきます。
function scrollStopEventTrigger(){
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function(){$(window).trigger(scrollStopEvent)}, 200);
}
スクロールイベントに作り方２で作成した関数をバインドし、スクロール中に連続して呼び出されるようにします。
そうすることでスクロール中はイベントの発火が clearTimeout によりキャンセルされ続け、スクロールが停止し、遅延時間が経過した場合のみイベントが発火される仕組みができあがります。
$(window).on("scroll", scrollStopEventTrigger);
作り方１～３の処理をまとめ、外部JSファイルにします。
ここではさらにスマートフォンのスクロールにも対応するため、touchmove イベントにも作り方２の関数をバインドしています。
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);
});
呼び方
次のように作り方４で作成したJSファイルを読込、スクロールストップ時の処理を記述します。
Array
サンプルのダウンロード
最後に
いかがでしたでしょうか。同じ仕組みで画面リサイズが終了した際のイベントなども作成することができます。
プログラミングはちょっとした工夫で便利なものが作成できるのが楽しいですね。
車輪の再発明になってしまう場合もよくありますが、その仕組を知ることは良い刺激になるのではないでしょうか。
それではまたの機会に⊂二二二（ ＾ω＾）二⊃
