STUDY/MOBILE

iscroll 사용시 안드로이드기기 더블클릭 현상

im빡썽 2014. 8. 4. 18:41

일반적인 웹과는 달리 모바일웹에서는 overflow속성을 제한하고있다.

(만약, 내부스크롤 박스가 모바일 화면보다 클 경우 전체 페이지내용을 보지못하는 문제가 발생하기때문)

이러한 이유로 모바일웹에선 내부스크롤 기능을 되도록이면 사용하지 않으려하지만, IOS5 버전부터 overflow 속성을 지원하는데다가 모바일웹에서도 제한된 박스내에서 여러 정보를 넣으려는 욕심에 내부스크롤링이 당연시되는 추세이다. ( 여전히 안드로이드 대부분기기 지원 x)

그래서 내부스크롤링을 하기위해 'iscroll'을 많이 쓰고있다. (http://cubiq.org/iscroll-5 에서 다운 가능)


실제로 작업을 해보면 아이폰을 맞출때 iscroll내부 click기능이 안되는 경우가 있다.

이런경우의 해결책은 굉장히 간단하다. 


var myScroll = new iScroll('box id명', { 

hScrollbar: false, 

vScrollbar: false, 

click: true

});

click option을 true로 바꿔주기만하면된다.

 

But, 일부 안드로이드에경우 click:true 를 넣으면 클릭이 두번 먹을수가있다. 이 경우 해결방법은 


var myScroll = new iScroll('box id명', { 

hScrollbar: false, 

vScrollbar: false, 

click: true,

onBeforeScrollStart:function(e){

e.preventDefault();

setTimeout(function(){

myScroll.refresh();

},0);

}

});