본문 바로가기

tip

iscroll시 native scroll 적용되게

반응형

iscroll.js 에서는 기본 스크롤하기전에 이벤트 막는것을 제거한다 아래처럼


iScroll v4.2.5 버전 기준,하위도 크게 상관없을것으로 보임


//onBeforeScrollStart: function (e) { e.preventDefault(); },

onBeforeScrollStart: function (e) { },


그리고 해당 스크롤 사용할 스크립트에, 붉은색 부분을 추가해준다.

stackoverflow에서 검색했는데, http://stackoverflow.com/questions/7800261/iscroll-with-native-scrolling-on-one-axis

여긴 onBeforeScrollMove를 썼는데, 그렇게 하니, 안드로이드에서(버전 상관없이, 진저에서 아이스크림 샌드위치까지)전부 버벅거린다고 해야되나, 그지같은 퍼포먼스가 나온다(iscroll 영역, native 스크롤은 정상)

그래서 onBeforeScrollStart로 바꿔주니 괜찮게 나온다.(모바일 네이버와 비슷함)


찾다보니, iscroll이 display:none이 아닌 visiblity:hidden으로 처리해서 안드로이드에서 퍼포먼스가 그지같은걸 발견, 이걸 해결한 국내 블로그를 하나 찾아봤는데, 그부분은 나중에 찾아봐야겠다. 아직까지 iscroll적용범위를 많이 쓰지 않는 관계로 퍼포먼스 향상이 필요한 단계는 아님.


<script>

function loaded() {

//document.addEventListener('touchmove', function(e){ e.preventDefault(); });

myScroll = new iScroll('app_wrap',{ 

hScrollbar:false,

vScroll: false,

onBeforeScrollStart: function ( e ) {

        if ( this.absDistX > (this.absDistY + 5 ) ) {

            // user is scrolling the x axis, so prevent the browsers' native scrolling

            e.preventDefault();

           }

        console.log('x = '+ this.absDistX + 'y =' + this.absDistY);

    }

});

}

</script>




반응형