scroll イベントの拡張プラグインメモ

  • スクロールイベントが X/Y 方向か判別可能
  • スクロール開始、スクロール中、スクロール終了時にイベント割当が可能
(function($j){
	$j.ex = $j.ex || {};
	$j.ex.scrollEvent = function( target , callback ){
		var tm = 0, status = 0 , param , pos;
		var setPosition = function(){
			pos = {
				top : target.scrollTop(),
				left : target.scrollLeft()
			}
		}
		setPosition();
		target.scroll( function(){
			status = status == 0 ? 1 : 2;
			if( tm ) clearTimeout( tm );
			tm = setTimeout( function(){
				tm = 0;
				setPosition();
				param.status = status = 0;
				callback( param );
			} , 100);
			if( status != 0){
				callback(param = {
					status : status,
					scrollY : pos.top != target.scrollTop(),
					scrollX : pos.left != target.scrollLeft()
				});
			}
		});
	}
	$j.fn.exScrollEvent = function( callback ){
		var targets = this;
		return 	targets.each(function(idx){
			new $j.ex.scrollEvent( targets.eq(idx) , callback );
		});
	}
})(jQuery);

使い方

$(window).exScrollEvent(function(pa){
	//Y方向時のみ
	if(pa.scrollY){
		if(pa.status == 1){
			//スクロール開始時
		}
		else
		if (pa.status == 0) {
			//スクロール終了時
		}
		else
		if (pa.status == 2) {
			//スクロール中
		}
	}
});