Проблема с прокручиваемым div на ipad

Question

Я разрабатываю приложение HTML/JS для потребления именно на iPad. В приложении есть некоторые прокручиваемые элементы.

Я установил ширину и высоту документа 1024 и 768 соответственно. Я поставил смотровое отверстие для

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

то я использую класс

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

для прокруткой дивы, чтобы сделать их прокрутки правильно. Наконец, я использую немного JavaScript, чтобы остановить overscroll на самом документе, позволяя прокручивать для дивы и списков:

$(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(); 
}); 

Все это работает - в основном. Однако есть одна загвоздка. Если прокручиваемый элемент не содержит достаточного количества содержимого, требующего прокрутки, попытка прокрутки запускает прокрутку по всему документу. Я прочитал сотни блогов и другие вопросы, но не могу найти решение. Любые идеи приветствуются.

Answer 1

После стольких боевых действий ответ оказался довольно простым: при запуске прокрутки вычислите общий размер содержимого и сравните его с размером прокручиваемого элемента - если содержимое меньше, предоставьте прокрутки. Таким образом, последняя функция изменяется от

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

к несколько более сложной

$('body').on('touchmove','.scrollable',function(e) { 
    var tot = 0; 
    $(this).children('li:visible').each(function() { tot += $(this).height(); }); 
    if(tot > $(this).innerHeight()) { 
     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 
    } 
    ); 

}