JAVASCRIPT/JQUERY/AJAX

[javascript-jQuery] iOS 터치(스크롤) 도중 이벤트 안먹히는 현상 해결

최고관리자
2018.10.17 13:34 5,521 0

본문

웹사이트 상단의 네비게이션 또는 헤더가 fixed 가 됐다가 다시 풀리는 기능중

$(window).scroll event 를 사용했었는데


안드로이드의 경우는 터치 도중에도 fixed 가 먹히는데

iOS 의 경우엔 touchend 가 되서야 계산이 되서 fixed 가 먹힌다.


구글링을 해보니, iOS 의 경우에는 touchmove event 를 주면 터치 도중에도 먹힌다는 사실을 앎.


touchend 사용법,



$(document).on({

touchmove: function() {

functionName();

},

scroll: function() {

functionName();

}

});


$(document).on({

touchmove: function() {

functionName();

},

scroll: function() {

functionName();

}

});


======================================================


$(window).scroll(function(){

hasScrolled();

}).on("touchmove", function () {

hasScrolled();

});


document.addEventListener("touchmove", hasScrolled, false);

document.addEventListener("scroll", Scroll, false);


function ScrollStart() {

//start of scroll event for iOS

//alert("touchmove");

}


function Scroll() {

//end of scroll event for iOS

//and

//start/end of scroll event for other browsers

alert("Scroll");

}



또한 safari 와 firefox 상위 버전에서만 먹히는

position : sticky 가 있는데 특정 영역에 sticky 값을 넣어주면

페이지 상단으로 스크롤이 이루어져 있을 때 영역이 상단에 고정되고 다시 풀린다.

사실 이게 가장 베스트 인거 같다.


예제는,

https://developer.mozilla.org/en-US/docs/Web/CSS/position


userAgent 를 체크해서 iOS 일때, sticky 클래스를 추가하는 방법으로 iOS에서 fixed 를 시킬 수 있음.


출처 : http://hellomrma.com/wp/?p=438

참고자료 : https://blog.outsider.ne.kr/971

댓글목록 0

등록된 댓글이 없습니다.