Wyłączanie elastycznego przewijania ciała iOS i utrzymywania natywnego przewijania działającego

Question

Obecnie pracuję nad jedną stroną aplikacji internetowej zoptymalizowaną pod kątem urządzeń dotykowych, głównie iOS. Zaimplementowałem nowe przewijanie natywne iOS przez -webkit-overflow-scrolling: touch; i wszystko działa dobrze, z tą różnicą, że wciąż odczuwamy efekt elastycznego przewijania jabłka na całym korpusie strony.

Dotyczy to całej strony przesuwającej się poza górną/dolną krawędź rzutni, gdy kończy się przewijanie lub ciało jest wypychane i naprawdę zdradza fakt, że jest to aplikacja internetowa. Poszedłem za various guidelines, w jaki sposób temu zapobiec i podczas gdy one działają, uniemożliwiają pracę wewnętrznie przewijanych elementów.

Here's a fiddle, aby pokazać, czego używam do tej pory.

Czy ktoś znalazł rozwiązanie, które uniemożliwia elastyczne przewijanie ciała, ale pozwala na używanie wewnętrznych przewijaków?

Answer 1

Mam dostosowany dobre rozwiązanie z Conditionally block scrolling/touchmove event in mobile safari użyciu Dojo:

var initialY = null; 
dojo.connect(document, 'ontouchstart', function(e) { 
    initialY = e.pageY; 
}); 
dojo.connect(document, 'ontouchend', function(e) { 
    initialY = null; 
}); 
dojo.connect(document, 'ontouchcancel', function(e) { 
    initialY = null; 
}); 
dojo.connect(document, 'ontouchmove', function(e) { 
    if(initialY !== null) { 
     if(!dojo.query(e.target).closest('#content')[0]) { 
      // The element to be scrolled is not the content node 
      e.preventDefault(); 
      return; 
     } 

     var direction = e.pageY - initialY; 
     var contentNode = dojo.byId('content'); 

     if(direction > 0 && contentNode.scrollTop <= 0) { 
      // The user is scrolling up, and the element is already scrolled to top 
      e.preventDefault(); 
     } else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) { 
      // The user is scrolling down, and the element is already scrolled to bottom 
      e.preventDefault(); 
     } 
    } 
}); 

elementu być przewijane jest #content w tym przypadku.

Answer 2

Może iScroll jest to, czego szukasz (jeśli mam pytanie prawej)

Answer 3

Na ryzyko powielania mój post, staram się rozwiązać ten sam problem i do tej pory jestem tylko tak daleko:

 $(document).bind("touchmove",function(e){ 
      e.preventDefault(); 
     }); 
     $('.scrollable').bind("touchmove",function(e){ 
      e.stopPropagation(); 
     }); 

To działa, jeśli masz element przelewowy, że nie obejmuje cały ekran , jak na przykład w aplikacji na iPada. ale to nie działa, jeśli masz aplikację mobilną, a cała widoczność jest pokryta przepełnionym elementem.

Jedyne co mogę myśleć jest sprawdzenie scrollTop() z $ („przewijane”), a następnie warunkowo wiążą preventDefault() jeśli jest to 0.

Po wypróbowaniu, zauważyłem, że webkit UA zgłasza scrollTop zawsze jako 0, gdy element jest przewijany do góry, nawet gdy wykonuje "wewnętrzne odbicie" natywnego przewinięcia. Więc nie mogę nic zrobić, ponieważ potrzebowałbym negatywnej przewijania, aby ustawić mój stan.

Westchnienie. Denerwujący.