[js] スクロールイベントを取得

ngi

13年前

スクロール位置を監視して、スクロール開始、停止、スクロール中のイベントを実行します。
使い道はスクロール終了のイベントを取るくらい？
jQuery非依存。対象のDOMはとりあえずwindowのみ。

デモ:

デモ（別ウィンドウで開きます）

ソース:

scroll_event.js
scroll_event.min.js(圧縮版)

ドキュメント

簡単な使い方の説明は↓

リスナーの追加、削除は

/**
 * リスナーを追加する
 *
 * @param	func {Function} リスナー
 * @return	{Boolean} 追加されたか
 */
WINDOW_APP.util.scrollMonitor.add(listener);

/**
 * リスナーを削除する
 *
 * @param	func {Function} リスナー
 * @return	{Boolean} 削除されたか
 */
WINDOW_APP.util.scrollMonitor.remove(listener);

リスナーで取得できるパラメーターは

/**
 * スクロールの監視イベント
 *
 * @param params {Object} 監視中のパラメーター
 * @param params.status {int} 0: スクロール停止した、1: スクロール開始した、2: スクロール中
 * @param params.positionX {Number} 縦スクロールの位置
 * @param params.positionY {Number} 横スクロールの位置
 * @param params.deltaX {Number} 縦スクロールの移動量
 * @param params.deltaY {Number} 横スクロールの移動量
 */
function onScroll (params) {
	switch(params.status) {
		case 0:
			//スクロール停止したときの処理
			break;

		case 1:
			//スクロール開始したときの処理
			break;

		case 2:
			//スクロール中の処理
			break;
	}
}

リスナーの追加、削除で自動的に監視の開始/停止が走りますが、手動で処理したい場合は

/**
 * モニターの開始（手動で実行する場合）
 *
 */
WINDOW_APP.util.scrollMonitor.start();

/**
 * モニターの停止（手動で実行する場合）
 *
 */
WINDOW_APP.util.scrollMonitor.stop();