【JavaScript】スクロールを終了した時に処理を実行する方法

2018年8月19日
JavaScript

JavaScriptでは、スクロールを終了した時のイベントを登録する方法はない。そのため、スクロールしている時のイベント( scroll )とsetTimeout関数を利用して対処する。

コード

let 	id 			= null;
const 	INTERVAL	= 300;

const onEnded = function() {
	// 処理
	
	id = null;
};

const onScroll = function() {
	clearTimeout( id );
	id = setTimeout( onEnded, INVERTEL );
};

window.addEventListener( 'scroll', onScroll );

説明

スクロール中にスクロールしている時のイベント( scroll )が起こるたび、setTimeout関数を使用してスクロールを終了した時の処理( onEnded )を予約する。この時、予約済みならばclearTimeout関数で予約済みの処理を取り消す。

スクロールを終了すると、setTimeoutに指定した時間が経過後、最後に予約した処理が呼ばれる。これでスクロールを終了した時に処理を実行したことになる。