Div scorrevole su iPhone senza usare 2 dita?
https://stackoverflow.com/questions/615357
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un UIWebView incorporato nella mia app per iPhone e vorrei mantenere sempre un DIV intestazione e piè di pagina bloccato sulla pagina, con un DIV centrale scorrevole.
So che potrei farlo usando un'intestazione / piè di pagina che sono controlli UIView, ma voglio che l'intestazione e il piè di pagina fossero div HTML, poiché una soluzione HTML / JS / CSS pura sarà più facile da portare su Android / PalmPre / AdobeAir, che sarà sulla mia lista di cose da fare relativamente presto.
Posso farlo usando tecniche come quella menzionata qui:
Ma questo richiede che l'utente usi 2 dita per scorrere il div, il che non è soddisfacente per me ...
Qualche suggerimento su come farlo?
Grazie,
Brad
Soluzione
Ho trovato qualcuno che ha implementato una soluzione riutilizzabile per questo, con un'intestazione e un piè di pagina:
Altri suggerimenti
Non ho molta familiarità con UIWebView, quindi questo potrebbe essere un suggerimento totalmente sciocco. Ma c'è qualcosa che ti impedisce di avere tre UIWebViews sulla pagina? Uno per l'intestazione, uno per il corpo e uno per il piè di pagina. Perché romperlo sembra l'idea giusta.
È questo quello che stai cercando? Apri questo collegamento sul tuo dispositivo iPhone o simulatore .
Il file index.html ha tre elementi div per " header " ;, " container " e "piè di pagina" direttamente sotto il corpo, mentre tutto il lavoro viene svolto nel file fixed.js. Il documento viene fissato sul posto annullando l'azione normale per il "touchmove" evento:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Quindi, molto lavoro va nella creazione di listener di eventi per il "touchstart", "touchmove" e "touchend" eventi collegati al "contenuto" div sotto " container " ;. La logica si riduce a spostare semplicemente il "contenuto". div su e giù.
Questa soluzione è HTML / CSS / JavaScript al 100%, tuttavia esistono alcuni CSS e JavaScript proprietari di WebKit che possono limitare la portabilità. Potrebbe essere necessario un po 'di modifiche per funzionare su un altro dispositivo mobile, ma questa sarebbe una buona prova di concetto da cui iniziare.
Non ho creato questo fantastico progetto di esempio, lo sto semplicemente portando all'attenzione della comunità. Per ulteriori informazioni e un collegamento al progetto zippato, leggi Richard "Doctyper" L'intero post di Herrara su Posizionamento fisso in Mobile Safari .
Può essere ingombrante, ma è possibile riposizionare l'intestazione e il piè di pagina sopra il div mentre l'utente scorre. In questo modo il tuo div principale non deve essere scorrevole. Nessun aiuto per nulla (ancora) usando i frame però.
Questo è uno dei problemi più irritanti del browser con l'iPhone / touch, spero che tu possa concentrarti su una parte della pagina come un normale browser.
Per un CSS fare riferimento solo a Riferimento CSS Safari probabilmente ha quello che stai cercando. Sarai particolarmente interessato a tutto ciò che inizia con " -webkit " o " -khtml " poiché quelle sono proprietà estese disponibili solo con WebKit come 3D e tocchi. Dovrebbe applicarsi anche ad Android.
Con JavaScript Introduzione agli argomenti di programmazione DOM WebKit e Riferimento API DOM WebKit sono guide utili. Dai sicuramente un'occhiata a la demo di light table per qualche copia e incolla javascript sulla gestione dei tuoi tocchi come è così che lo risolverei.
Ho implementato iScroll su iPhone ed è davvero fluido e veloce e puoi fare quello che vuoi. Gli svantaggi sono che Android (1.6) rifiuta di scorrere come volevo e talvolta blocca altri javascript se ce ne sono.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Aggiungi quelli al tuo codice html potrebbe risolvere il tuo problema.
