スクロールストップを通知するjQueryイベントの作り方2015年1月20日プログラミングJavaScriptjQueryTweetはじめまして、こんにちは。エンジニアのハルです。Web開発で必要になったものを紹介していきます。動きのあるWebページを作成していると、スクロールが止まった時に処理を動かしたいときがあります。残念なことに標準のイベントにはスクロール終了、停止時のイベントが用意されていません。そこで今回は次のように簡単に実装できる、スクロールが停止した際のイベントの作り方を紹介します。console.log("スクロールが停止しました。");});作り方1.jQueryイベントオブジェクトを作成スクロールストップ用のjQueryイベントオブジェクトを作成します。$.Event("scrollstop");2.スクロールストップ判定用の関数を作成スクロールが停止したことを判定し、作り方1で作成したイベントを発火する関数を作成します。よりキャンセルする処理を記述しておきます。200);}3.スクロールイベントに2の関数をバインドスクロールイベントに作り方2で作成した関数をバインドし、スクロール中に連続して呼び出されるようにします。よりキャンセルされ続け、スクロールが停止し、遅延時間が経過した場合のみイベントが発火される仕組みができあがります。作り方1~3の処理をまとめ、外部JSファイルにします。イベントにも作り方2の関数をバインドしています。次のように作り方4で作成したJSファイルを読込、スクロールストップ時の処理を記述します。});});</script>デモサンプルのダウンロード最後にいかがでしたでしょうか。同じ仕組みで画面リサイズが終了した際のイベントなども作成することができます。プログラミングはちょっとした工夫で便利なものが作成できるのが楽しいですね。車輪の再発明になってしまう場合もよくありますが、その仕組を知ることは良い刺激になるのではないでしょうか。次の記事へ株式会社ライズウィル人に、企業に、社会に貢献するサービスを提供するITソリューション企業の株式会社ライズウィルです。ライズウィルブログでは、システム開発、Web制作、デザインなどのITに関するためになる情報や、社内のイベント、お知らせなどを掲載していきます。求める人材Web系、もしくはオープン系の開発実務1年以上の経験をお持ちの方。