ios(safari) touchstart ,touchmove , touchend (패럴랙스) 질문입니다.

Question

현재 scroll 이벤트를 사용하여 패럴렉스 기능을 사용했는데,아이폰으로 확인해보니 scroll event가 touch event로 전환 되었더라구요.근데 문제는 패럴렉스 기능이 잘 도ㅣ긴하는데 , 그 기능이 실행되는게 touchend부분에서 실행이 됩니다.구글링하여 찾아보니까 touchstart ↓touchmove ↓ touchend 총 0.3초의 시간이 걸려 touchend부분에서 코드가 실행되는것을 알아냈는데,참고했던 (오늘의집 모바일 : 상세페이지 터치 패럴렉스 기능)은 touchstart 부분에서 바로 실행이 됩니다... 도대체 뭐가 문제일까요 ㅜㅜ /* 상세페이지 패럴랙스 기능 추가*/ $(function () { var top = $('.wrap').offset().top; //y좌표의 초기치를 취득 $(window).scroll(function () { var scrollValue = 10; var value = $(this).scrollTop(); //스크롤치를 취득 var min = 33.333333 - value / 1 //상세페이지 이미지 slide 값 $('.wrap').css('top', min / 8); //상세페이지 product_body 값 $('.msg').css('top', top + value / -4); }); }) /* 모바일인지 데스크탑인지 알려줌 */ $(document).ready(function() { var verification=false; //결과값 초기 설정 if('ontouchstart' in document.documentElement){ alert("touch device"); }else{ alert("not touch device"); } });

빠이욧 · Answer

현재 낸 결론은 $(document).ready(function() { var verification&#61;false; //결과값 초기 설정 if('ontouchstart' in document.documentElement){ //모바일이면 터치 이벤트 작동 alert(&#34;touch device&#34;); var top &#61; $('.wrap').offset().top; //y좌표의 초기치를 취득 $(document).bind('touchmove', function(e){ var value &#61; $(this).scrollTop(); //스크롤치를 취득 var min &#61; 33.333333 - value / 1 //상세페이지 이미지 slide 값 $('.wrap').css('top', min / 8); //상세페이지 product_body 값 $('.msg_box').css('top', top &#43; value / -4); e.preventDefault();//이벤트 취소 }); } else { //웹이면 스크롤 이벤트 작동 alert(&#34;not touch device&#34;); var top &#61; $('.wrap').offset().top; //y좌표의 초기치를 취득 $(window).scroll(function () { var value &#61; $(this).scrollTop(); //스크롤치를 취득 var min &#61; 33.333333 - value / 1 //상세페이지 이미지 slide 값 $('.wrap').css('top', min / 8); //상세페이지 product_body 값 $('.msg_box').css('top', top &#43; value / -4); }); } });이렇게 했습니다. 다만윈도우모바일로하면 잘 작동되는것이 어플전용으로 들어가서 하게되면 화면이 고정되어 움직이질 않네요 ㅜㅜ 앱 버전 코드언어가 따로 있는걸까요?

ios(safari) touchstart ,touchmove , touchend (패럴랙스) 질문입니다.

1개의 답변

Q&A 목록