0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

スクロール移動後や画面リサイズ後に処理をする

onscroll や onresize を利用すれば、スクロール時や画面リサイズ時の処理はできるが、スクロールが止まったときや画面リサイズした後にアクションしたいとき。

スクロール後

前提: 事前にjQueryを呼び出していること

jQueryイベントを追加する
(function(){
var newEvent = new $.Event("scrollstop"),
timer;
function newEventTrigger(){
if (timer) clearTimeout(timer);
timer = setTimeout(function(){
$(window).trigger(newEvent)
}, 200);
}
$(window).on("scroll", newEventTrigger);
})();
使い方
$(window).on("scrollstop", function(){
// ここに処理
});
  • イベント名を「scrollstop」としていますが、わかりやすい名前に変更して問題ないです。
  • 厳密には、スクロールが止まってから、200ミリ秒(0.2秒)後に実行されます(もちろん、200を変更することで自由に設定可能)。

画面リサイズ後

前提: 事前にjQueryを呼び出していること

jQueryイベントを追加する
(function(){
var newEvent = new $.Event("resizestop"),
timer;
function newEventTrigger(){
if (timer) clearTimeout(timer);
timer = setTimeout(function(){
$(window).trigger(newEvent)
}, 300);
}
$(window).on("resize", newEventTrigger);
})();
使い方
$(window).on("resizestop", function(){
// ここに処理
});
  • イベント名を「resizestop」としていますが、わかりやすい名前に変更して問題ないです。
  • 厳密には、スクロールが止まってから、300ミリ秒(0.3秒)後に実行されます(もちろん、300を変更することで自由に設定可能)。