WebMobile

Mobile Wep iScroll Dynamically Loading 이슈

iScroll 플러그인 사용시 동적 로드 시 이슈

iScroll은 모바일용 웹페이지 개발 시 내부 스크롤바 기능을 가능하게 해주는 자바스크립트 플러그인 이다.

iScroll 사용시 아이폰,안드로이드 모두 정상동작하나, 동적일때가 문제가 있다.
예를들어 검색버튼을 눌렀을때 스크롤될 리스트들이 호출되거나 동적으로 페이지 불러올때 페이지 양이 많아서 불러오느라 시간이 지연되어서 스크롤 처리가 안되어 iScroll 기능이 정상적으로 작동하지 않고 스크롤이 생기지 않는 문제가 있다. (가로,세로 폰을 돌리면 스크롤이 생기긴 한다.)

이유는 동적으로 불러오는 컨텐츠의 로딩이 페이지의 로딩보다 늦기 때문에, 동적으로 불러오는 컨텐츠는 wrapper div 내에 포함되어도 iscroll 이 div 의 변화를 인지하지 못해 생기는 문제이다.
로딩이 끝난 다음 .refresh() 메소드를 호출 하던지 아니면 페이지 로딩되는 시간을 감안해서 setTimeout 으로 .refresh() 해도 된다.
다만, 이 경우에도 setTimeout 보다 로딩이 느린 경우에는 가끔 스크롤이 안 먹는 경우가 생기기도 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myScroll;

function loaded() {
    myScroll = new iScroll('wrapper', {checkDOMChanges: true});

   setTimeout(function() {      
        myScroll.refresh();
   }, 100);

    // 삭제
    //myScroll.destroy();
    //myScroll = null;
}
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false);

wrapper 엘리먼트에 크기가 바뀌었을 경우 iScroll 객체에 .refresh() 메서드를 호출해 주어야 한다.
단말기 방향을 바꾸었을 때 screen width 변경되면서 wrapper 엘리먼트의 크기도 변경되기 때문에.. 이럴 때에는 orientationchange 이벤트에서 .refresh() 호출을 해주면 된다.

1
2
3
window.addEventListener('orientationchange', function() {
    myscroll.refresh();  // iScroll 갱신
}, false);

참조

공유하기