Scorri la pagina sullo stato di attivazione del testo per i dispositivi mobili?

Question

Sto creando un sito ottimizzato per dispositivi mobili con un input di testo che filtra un elenco durante la digitazione. Il suo simile a questo: http://jquerymobile.com/test/docs/lists/lists-search.html

Per i telefoni, sarebbe un vantaggio di usabilità se quando si seleziona l'input la pagina scorre verso il basso in modo che l'input era nella parte superiore della pagina. In questo modo, gran parte dell'elenco sottostante sarà visibile mentre digiti. È possibile e/o qualcuno ha esperienza nel farlo? Grazie

Answer 1

Concordato: sarebbe bello per l'usabilità.

Se stai usando jQuery, questo dovrebbe fare il trucco:

$('#id-of-text-input').on('focus', function() { 
    document.body.scrollTop = $(this).offset().top; 
}); 

Answer 2

Una soluzione migliore sarebbe:

$('#id-of-text-input').on('focus', function() { document.body.scrollTop += this.getBoundingClientRect().top - 10 });

Perché offsetTop (o .offset().top se utilizzando jQuery) restituire il distanza dal primo genitore genitore, dove è necessaria la distanza dalla parte superiore del document.

getBoundingClientRect().top restituisce la distanza tra la posizione corrente viewport all'elemento, e. se si scorre 300px sotto l'elemento, restituirebbe -300. Quindi, aggiungendo la distanza usando += si scorrerebbe fino all'elemento. -10 è facoltativo - per consentire un po 'di spazio nella parte superiore.