2012-03-10 3 views
6

Voglio creare l'applicazione fullscreen html5. Ho creato una pagina e l'ho aggiunta come icona al mio iphone. Ho aggiunto metatag:Come disabilitare il bouncing nell'app html5 a schermo intero per iphone?

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="viewport" content="width=device-width, user-scalable=no" /> 

Quello che volevo raggiungere è: barra di stato nero sulla parte superiore (questo non funziona e non so il motivo per cui è ancora barra di stato di default ... idee chiunque.?), Senza possibilità per ingrandire (come nell'app Facebook): funziona bene.

Ora il problema: posso scorrere sul mio iphone anche se la mia app si adatta allo schermo. Rimbalza, ma non voglio questo comportamento. Vorrei disabilitarlo e abilitare lo scorrimento di un particolare div (.ui-content). Come posso ottenerlo?

MODIFICA: la barra di stato ora è nera. È cambiato da solo dopo un po 'di tempo. La versione precedente era memorizzata nella cache dell'iPhone o cosa?

+0

http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html –

risposta

15

Questo consentirà di evitare lo scorrimento sull'intera pagina

document.ontouchmove = function(e) {e.preventDefault()}; 

Nel tuo caso, in cui si desidera che alcuni div ad essere scorrevole, e alcuni non, si dovrebbe essere in grado di catturare l'evento prima che arrivi al documento

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()}; 
+1

È questa soluzione che lavora per te? Questo infatti ha fermato il bouncing durante l'esecuzione da safari, quando sulla pagina web stand-alone (tramite il link "aggiungi alla home page") la pagina continua a rimbalzare ... – liorda

+1

Un buon tentativo, funziona per la maggior parte. Tranne quando l'elemento con lo scorrimento abilitato viene fatto scorrere verso l'alto o il basso. Quindi l'effetto di rimbalzo è ancora attivato. – mrt

+0

Mentre funziona, ho riscontrato problemi in cui ciò sembra causare talvolta interazioni tap/click come pulsanti per non riuscire (presumibilmente, se ci fosse un movimento del contatto durante l'attivazione del clic). Per ora la mia soluzione per questo è di non chiamare preventDefault se e.target è un pulsante, collegamento o elemento di input. –

1

Se la vostra utilizzando Cordova 1.7+, aprire il file Cordova.plist e impostare l'UIWebViewBounce chiave per NO

+0

Fare attenzione quando si inviano copia e incolla di risposte boilerplate/verbatim a più domande, che tendono ad essere contrassegnate come "spammy" dalla comunità. Se lo fai, in genere significa che le domande sono doppie, quindi contrassegnali come tali: http://stackoverflow.com/a/12394389/419 – Kev

+0

Ok scusami per quello. –

0

Estendendo l'approccio delle dmanxii qui è quello che stiamo facendo.

$("body").on("touchmove", function (event) { 
     if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) { 
      //console.log("NOT Disabled"); 
     } 
     else { 
      //console.log("Disabled"); 
      event.preventDefault(); 
     } 
    });