2011-12-24 3 views
0

고정 된 머리글 및 바닥 글과 중간에 응용 프로그램의 내용을 포함하는 스크롤 가능한 div가있는 ajax 사이트를 개발했습니다. 이 사이트는 사용자가 중간 스크롤 가능 div의 맨 아래에 도달하면 탄성 스크롤이 시작되고 페이지 하단이 맨 위로 이동하는 것을 제외하고는 모바일 장치에서도 잘 작동합니다 (iPad, Android 등). 화면 하단. 스크롤 가능한 div 상단에 도달 할 때와 동일합니다.모바일 사이트 방지 탄력적 인 페이지 스크롤 방지

$('#Platform').bind('touchmove', function (e) {  
    e.preventDefault();  
}); 

을하지만 이것은 분명히 전혀 스크롤을 방지하고 사용자가 응용 프로그램의 내용을 볼 수 없습니다

나는 완전히 다음을 수행하여 탄성 스크롤을 방지 할 수 있습니다 알고 있습니다. 내 생각에 위의 이벤트에 e.preventDefault()가 호출되어 사용자가 div의 맨 위에 있고 스크롤하려고하거나 해당 변수의 맨 아래에있을 때만 조건부 논리를 호출하여 div 그리고 그들은 아래로 스크롤하려고합니다.

$('#Platform').bind('touchmove', function (e) { 
    var platform = $('#Platform'); 
    if ((platform.scrollTop() + platform.innerHeight()) >= platform[0].scrollHeight) { 
     e.preventDefault(); 
    } 
}); 

위의 코드는 기본적으로 그들이 스크롤 DIV의 아래쪽에있는 경우 결정하고 만약 그들이, e.preventDefault()가 호출 :이 같은 일을 시작했다. 이것은 훌륭하지만 div의 하단에 도달하면 다시 스크롤 할 수 없게됩니다! 어떻게 든 사용자가 스 와이프하여 내 논리에 포함시키는 방식을 결정해야한다는 것을 알 수 있습니다. 맨 아래에 있고 아래로 스 와이프하는 경우 스크롤하지 마십시오. 그러나 그들이 맨 아래에 있고 위로 스 와이프하면, 스크롤 할 수있게하십시오. 그리고 그들이 div의 꼭대기에있을 때를위한 visa versa.

내 목표를 달성하는 가장 좋은 방법인가요? 더 좋은 방법이 있습니까? 이것이 내가해야하는 것이라면, 어떻게 슬쩍의 방향을 결정합니까?

또한 개발 서버에 배포하는 것보다 iPad, iPhone, Android 기기에서 웹 사이트를 테스트하는 쉬운 방법이 있습니까? 필자는 코드를 쉽게 디버깅 할 필요가 없다는 사실을 제외하고는 제안 된 솔루션으로 더 놀았을 것입니다.

감사합니다.

답변

0

http://cubiq.org/iscroll-4 귀하의 용도에 적합합니다. Mac을 사용하고 있다면 xCode/iPhone SDK를 다운로드 할 때 iPhone/iPad 시뮬레이터를 사용하면 쉽게 프로그램을 디버깅 할 수 있습니다.