SYNCERのロゴ
アイキャッチ画像

スクロール終了時に処理を実行する方法

JavaScriptで、スクロールを終了したタイミングで処理を実行したい時は、scrollイベントとsetTimeout()を利用しましょう。

サンプルコード

下記は、スクロールを停止して500ms経った時に終了判定として処理を実行する例です。用途により、500の部分を調整しましょう。

var timeoutId ;

window.addEventListener( "scroll", function () {
	// スクロールを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		// 処理内容
	}, 500 ) ;
} ) ;

デモ

スクロールを停止した時に、カウントが増加するのを確認して下さい。

var timeoutId ;
var count = 0 ;

window.addEventListener( "scroll", function () {
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		++count ;
	}, 500 ) ;
} ) ;

count = 0

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月5日 (土)
コンテンツを公開しました。