¿Desplazar página en el foco de entrada de texto para dispositivos móviles?

Question

Im haciendo un sitio optimizado para dispositivos móviles con una entrada de texto que filtra una lista a medida que escribe. Su similar a esto: http://jquerymobile.com/test/docs/lists/lists-search.html

Para los teléfonos, sería un beneficio usabilidad si cuando se ha seleccionado la entrada de la página desplaza hacia abajo por lo que la entrada estaba en la parte superior de la página. De esta manera, gran parte de la lista a continuación sería visible mientras escribe. ¿Es esto posible y/o alguien tiene experiencia haciéndolo? Gracias

Answer 1

De acuerdo, eso sería bueno para la usabilidad.

Si estás usando jQuery, esto debería hacer el truco:

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

Answer 2

Una mejor solución sería:

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

Debido offsetTop (o si .offset().top usando jQuery) devuelven el distancia desde la primera posición padre, donde como necesita la distancia desde la parte superior de la document.

getBoundingClientRect().top devuelve la distancia entre la posición viewport actual al elemento, es decir, si se desplaza 300px debajo del elemento, devolvería -300. Así que al agregar la distancia usando += se desplazará al elemento. -10 es opcional: para dejar espacio en la parte superior.