come faccio a far scorrere i contenuti dinamicamente in un DIV su Iphone's safari o sul webkit di Android?

Question

il mio codice:

for(var myLine = 0; myLine < 100; myLine++) 
     document.getElementById("myDiv").innerHTML += "line " + myLine + "<br>"; 


............... 

<div style="position:...etc; overflow:auto;" id="myDiv"></div> 

questo funziona senza un problema tecnico in tutti i browser su tutte le piattaforme mobili non. Tuttavia ... quando questo è implementato su iPhone (Safari) o Android (webkit) il div viene riempito con il testo ma non viene generata alcuna barra di scorrimento quando il testo scorre oltre l'altezza del div e l'utente non può "spingere" il contenuto verso il basso entrambi. L'overflow così efficace è sempre "nascosto" a prescindere da cosa.

Sono curioso di sapere se c'è qualche approccio alternativo che sto trascurando o se questo è solo un bug, non ho modo di muovermi al momento.

Answer 1

Questo è un problema noto sul webkit mobile: http://www.quirksmode.org/webkit.html. Cerca overflow.

La soluzione è iScroll.

Answer 2

In realtà, iOS si comporta correttamente. L'utente deve utilizzare due dita per scorrere qualsiasi area di scorrimento su una pagina che non è l'intera pagina. (altrimenti come sarebbe il browser se l'utente volesse far scorrere un div o il contenitore quando entrambi riempiono lo schermo su una pagina non ottimizzata.)

Il modo migliore per aggirare la 'caratteristica' è implementare un tocco gestore di eventi che muove il div up quando l'utente lo tocca. Un ottimo esempio di ciò è in pratica il codice di esempio FingerTips di Apple.

Apple utilizza questa tecnica esatta quando si sfoglia lo Safari Developer Library su un iPad.

Answer 3

Penso che il problema sia nell'impostazione di innerHTML e qui è lo stesso post.

È quella funzione chiamata su iPhone dopo che il dom è stato caricato e pronto?