iPad에서 touchmove 이벤트로 이미지 이동

Question

고정 된 배경 이미지가있는 웹 사이트가있어서 이미지가 고정되어 있지 않으므로 iPhone 및 iPad 용으로 조정하려고합니다. 나는 행운이없는 여러 포장지를 시험해 보았다. 한 방향으로 스크롤 할 수 없거나 사이트가 제대로 스크롤되지 않습니다 (동적 아약스 사용). 그래서 페이지의 스크롤과 이미지 배경을 이동하는 방법이 있다면 찾고 시작하고 난 다음을 사용 :

$(document).bind('touchmove',function(e){ 
    $('.background_image').css({top: $(document).scrollTop()}); 
$('.background_image img').css({top: $(document).scrollTop()}); 
console.log($('.background_image img').css('top')); 
}); 

$(document).bind('scroll', function() { 
    $('.background_image').css({top: $(document).scrollTop()}); 
    $('.background_image img').css({top: $(document).scrollTop()}); 
}); 

이 첫 번째 '터치'에 대한 작동하는 것 같다,하지만 배경은 다음하지 않습니다 계속 움직여 라. 움직이는 것을 멈 추면 '두루마리'바인드가 튀어 나와 올바른 위치로 이미지가 이동합니다. 이것이 가능한 일입니까? 아니면 여기서 불가능한 일을하려고합니까? 로깅 결과는 css가 실제로 변경되고 있지만 화면이 업데이트되지 않고 있음을 보여줍니다.

UPDATE

가 도움이되지만 여기에 내가 현재 사용하고있어 HTML/CSS의 경우 나도 몰라 :

<div class="background_image"> 
    <img src="image.jpg" /> 
</div> 

.background_image { 
position: fixed; 
left: 0px; 
top: 0px; 
overflow: hidden; 
z-index: -1; 
} 

.background_image img { 
position: fixed; 
overflow: hidden; 
top: 0px; 
left: 0px; 
background: white; 
} 

도 약간 쉽게 뭔가 내 코드를 변경했습니다.

건배,

댄

Answer 1

이 첫 번째 '터치'에 대한 작동하는 것 같다,하지만 배경이 후 지속적으로 이동하지 않습니다. 움직이는 것을 멈 추면 '두루마리'바인드가 튀어 나와 올바른 위치로 이미지가 이동합니다. 이게 가능한 묘기인가요, 아니면 여기에서 불가능을 성취하려고 노력하고 있습니까? 로깅 결과는 css가 실제로 변경되고 있지만 화면이 업데이트되지 않고 있음을 보여줍니다.

유감스럽게도 iOS 기기에서는 현재 불가능합니다. iOS 최적화 사이트에서 잠시 동안 jQuery Mobile을 사용해 왔지만 이것은 큰 결점 중 하나입니다. 때 스크롤 마감을 적용하도록 대기, 스크롤 중에 iOS 기기 동결 DOM 조작을

참고 : (. here 참조) jQuery를 모바일 팀은이 같은 문제에 대해 설명합니다.

그게 당신이 관찰하는 동작의 이유입니다. 이벤트가 대기열에 들어가고 스크롤이 끝난 후 bg 이미지가 업데이트됩니다. 대부분의 경우이 문제는 iScroll을 사용하여 해결할 수 있습니다. 컨테이너의 네이티브 스크롤 핸들러를 완전히 대체 할 수는 있지만 수행하려는 작업에 가치가 있는지는 잘 모르겠습니다.

Answer 2

우리는 해결 방법으로 해결하기로 결정하고 바닥에 지정된 배경색으로 페이드 아웃하는 iPhone 용 그림을 구현했습니다.