iScroll 4에 onScroll 이벤트 사용하여 iOS의 TableView 구현하기

최근 모바일웹 프로젝트를 진행하면서, DIV 스크롤 기능이 필요하여 iScroll을 사용하게 되었습니다. 그런데 아직 onScroll 이벤트를 제공하지 않아서, 약간의 코드를 추가해서 onScrolling 이벤트를 만들었습니다.

다음과 같이 onScrolling 이벤트를 추가해 주고,

// Events
onRefresh: null,
onBeforeScrollStart: function (e) { e.preventDefault(); },
onScrollStart: null,
onBeforeScrollMove: null,
onScrollMove: null,
onBeforeScrollEnd: null,
onScrollEnd: null,
onTouchEnd: null,
onDestroy: null,
onZoomStart: null,
onZoom: null,
onZoomEnd: null,
onScrolling:null

그리고 _pos함수에서 위에서 정의된 onScrolling 이벤트를 실행하도록 했습니다.

_pos: function (x, y) {
	if (this.zoomed) return;

	x = this.hScroll ? x : 0;
	y = this.vScroll ? y : 0;

	if (this.options.useTransform) {
		this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
	} else {
		x = m.round(x);
		y = m.round(y);
		this.scroller.style.left = x + 'px';
		this.scroller.style.top = y + 'px';
	}

	this.x = x;
	this.y = y;
		
	if (this.options.onScrolling) this.options.onScrolling.call(this);

	this._scrollbarPos('h');
	this._scrollbarPos('v');
},

스크롤 이벤트를 받으려면, iScroll 초기화 시에 다음과 같이 콜백함수를 등록해 주면 됩니다.

myScroll = new iScroll('wrapper', {onScrolling: scrolling});

function scrolling(){
	// onScroll event
}

약 2주일 정도 테스트 해보고 있는데, 아직까진 별다른 문제는 없어 보이네요.

iOS TableView Demo
Simple TableView Demo
TableView with IndexBar Demo