ipad에서 스크롤 가능한 div와 관련된 문제

Question

iPad에서 특별히 소비 할 수 있도록 HTML/JS 앱을 설계하고 있습니다. 앱에는 스크롤 가능한 요소가 있습니다.

문서의 너비와 높이를 각각 1024와 768로 설정했습니다. 나는 그때 그들이 제대로 스크롤 할 수 있도록 클래스를 스크롤 div에 대한

.scrollable { 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
} 

를 사용

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 

에보기 포트를 설정합니다. 마지막으로, 나는 스크롤 div의 나열을 허용하면서 문서 자체에 오버 스크롤 중지 자바 스크립트의 비트를 사용

$(document).on('touchmove',function(e){ 
    e.preventDefault(); 
}); 

//uses body because jquery on events are called off of the element they are 
//added to, so bubbling would not work if we used document instead. 
$('body').on('touchstart','.scrollable',function(e) { 
    if (e.currentTarget.scrollTop === 0) { 
     e.currentTarget.scrollTop = 1; 
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { 
     e.currentTarget.scrollTop -= 1; 
    } 
}); 

//prevents preventDefault from being called on document if it sees a scrollable div 
$('body').on('touchmove','.scrollable',function(e) { 
    e.stopPropagation(); 
}); 

이 작품의 모두 - 대부분. 그러나 한 가지 걸림돌이 있습니다. 스크롤 할 수있는 요소에 스크롤이 필요한 내용이 충분하지 않으면 스크롤하려고하면 전체 문서에 대한 초과 스크롤이 시작됩니다. 수백 가지 블로그 및 기타 SO 질문을 읽었지만 이에 대한 해결책을 찾을 수 없습니다. 어떤 아이디어라도 대단히 감사하겠습니다.

Answer 1

많은 노력을 기울여서 대답은 매우 간단합니다. 스크롤이 시작되면 콘텐츠의 전체 크기를 계산하고 스크롤 가능한 요소의 크기와 비교합니다. 콘텐츠가 작 으면 스크롤링. 그래서, 마지막 기능은 약간 더 복잡한

$('body').on('touchmove','.scrollable',function(e) { 
    var tot = 0; 
    $(this).children('li:visible').each(function() { tot += $(this).height(); }); 
    if(tot > $(this).innerHeight()) { 
     e.stopPropagation(); 
    } 
}); 

에

$('body').on('touchmove','.scrollable',function(e) { 
    e.stopPropagation(); 
});    

에서 변경 그리고 정말, 그것 뿐이다. 당신이 가난한 스크롤 성능을 살 수 있다면

Answer 2

, 당신은이 예제를 시도 할 수 있습니다 :

* 브라우저 * http://gregsramblings.com/2012/05/23/preventing-vertical-scrolling-bounce-using-javascript-on-ios-devices/

반송하지 않도록이 터치를 방지하기 위해 사용

var xStart, yStart = 0; 
document.addEventListener('touchstart',function(e) { 
    xStart = e.touches[0].screenX; 
    yStart = e.touches[0].screenY; 
}); 
document.addEventListener('touchmove',function(e) { 
    var xMovement = Math.abs(e.touches[0].screenX - xStart); 
    var yMovement = Math.abs(e.touches[0].screenY - yStart); 
    if((yMovement * 3) > xMovement) { 
     e.preventDefault(); 
    } 
}); 

* 당신이 할 수 있도록, 아래 또는 위로 강타를 잡기 위해 이것을 사용하여 자신의 스크롤 *

function init_swipe() 
{ 

    x$("#main_body").swipe(
    function(e, data){ 
      if (data.direction == 'down') 
      { 
       var offset=window.scrollY+data.deltaY*100; 
       $('html,body').animate({scrollTop: offset},200); 
      } 
      if (data.direction == 'up') 
      { 
       var offset=window.scrollY+data.deltaY; 
       $('html,body').animate({scrollTop: offset},200); 
      } 
    }, { 
     swipeCapture: true, 
     longTapCapture: true, 
     doubleTapCapture: true, 
     simpleTapCapture: false, 
     preventDefaultEvents: false 
    } 
    ); 

}