Disabilitazione scorrimento corpo elastico iOS e mantenimento dello scorrimento nativo funzionante

Question

Attualmente sto lavorando a un'applicazione web a pagina singola ottimizzata per dispositivi touch, principalmente iOS. Ho implementato il nuovo scrolling nativo iOS tramite -webkit-overflow-scrolling: touch; e tutto funziona bene, tranne per il fatto che stiamo ancora sperimentando l'effetto scroll elastico di Apple sull'intero corpo della pagina.

Ciò implica che l'intera pagina si sposta dalla parte superiore/inferiore del viewport quando una pergamena termina o il corpo viene spinto e si deduce davvero che si tratta di un'app Web. Ho seguito various guidelines su come prevenirlo e mentre funzionano, impediscono al tutto gli elementi di scorrimento interni di funzionare.

Here's a fiddle per dimostrare quello che sto usando finora.

Qualcuno ha trovato una soluzione che disabilita lo scorrimento elastico del corpo ma consente il funzionamento degli scrollabili interni?

Answer 1

Ho adattato la buona soluzione da Conditionally block scrolling/touchmove event in mobile safari usando 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(); 
     } 
    } 
}); 

L'elemento da scorrere è #contenuto in questo caso.

Answer 2

Forse iScroll è quello che stai cercando (se ho capito la tua domanda destra)

Answer 3

A rischio di duplicare il mio post, cerco di risolvere lo stesso problema e finora sono soltanto fino a questo punto:

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

Questo funziona se si dispone di un elemento di overflow che non copre l'intero schermo ad esempio, come in un'app per iPad. ma non funziona se si dispone di un'app mobile e l'intero viewport è coperto dall'elemento in overflow.

L'unica cosa che riuscivo a pensare è quello di verificare la scrollTop() del $ ('scorrevole') e poi condizionalmente legare il preventDefault() se si tratta di 0.

Dopo aver provato, ho notato che la webkit UA segnala scrollTop sempre come 0 quando l'elemento viene fatto scorrere verso l'alto anche quando esegue il "rimbalzo interno" dello scroll overflow nativo. Quindi non posso fare nulla dal momento che avrei bisogno di una scrollTop negativa per impostare la mia condizione.

Sigh. Frustrante.