최근 모바일웹 프로젝트를 진행하면서, 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