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

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

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

127
128
129
130
131
132
133
134
135
136
137
138
139
140
// 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 이벤트를 실행하도록 했습니다.

287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
_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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다