検索

///

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

wrote :

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

川上 武範（かわかみ たけのり）
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。