2011-10-04 29 views
7

È necessario visualizzare un elemento (div) ontop della pagina Web. Durante lo scorrimento l'elemento dovrebbe scomparire e riapparire dopo la fine della pagina.Nascondere e mostrare div durante lo scorrimento pagina su iphone

Per aggiungere alla complessità:

  1. nostro codice è un codice ospite (quindi non siamo in grado di manipolare il DOM struttura, ecc).
  2. il nostro codice è destinato a lavorare su iPhone/iPad (browser mobile Safari)

Abbiamo cercato di ascoltare touchstart evento il documento/corpo e nascondere l'elemento (div) nel nostro gestore dedicato. Tuttavia, in alcuni siti, (quando la struttura DOM diventa ragionevolmente complessa) il tempo di risposta di scorrimento aumenta in modo significativo, anche se l'implementazione del gestore è interamente vuota.

Stiamo cercando il modo corretto di gestire l'aspetto (ri) degli elementi con un impatto minimo sull'esperienza utente durante lo scorrimento.

risposta

0

Nella recente versione IOS (5.x) posizionamento fisso (position:fixed in CSS) è correntemente supportato, in modo che l'elemento sarà posizionato su coordinate dello schermo. Questo potrebbe essere un buon punto di partenza per risolvere i tuoi problemi.

+0

Non funziona con la tastiera – Petah

+0

Risolto il problema con iOS 6 ... "Nota: funziona solo su Android 2.2+ utilizzando il seguente meta tag: . Il supporto parziale in Safari di iOS si riferisce al comportamento del buggy." --http: //caniuse.com/css-fixed – nym

1

Penso che Javascript sia la soluzione migliore. Puoi inserire il tuo DIV in modo dinamico su qualsiasi contenuto utilizzando document.createElement, quindi aggiungi anche javascript per ascoltare onScroll ...

Puoi anche popolare il DIV utilizzando l'HTML personalizzato creato dal codice nativo, se lo desideri.

Qualsiasi aiuto?

+1

Il gestore 'onScroll' si chiama * dopo * scroll, nel nostro caso vorremmo nascondere l'elemento * prima * lo scorrimento inizia. – roee

1

Non so se sei un utente jQuery, ma questa funzione .scroll() può aiutarti a fare esattamente ciò che vuoi fare. Guarda la demo per vedere come funziona.

http://api.jquery.com/scroll/

Problemi correlati