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を変更することで自由に設定可能）。