Przewiń stronę w ustawieniach ostrości tekstu dla urządzeń mobilnych?

Question

Tworzę witrynę zoptymalizowaną pod kątem urządzeń mobilnych za pomocą wpisywanego tekstu, który filtruje listę podczas pisania. Jest podobny do następującego: http://jquerymobile.com/test/docs/lists/lists-search.html

W przypadku telefonów korzystanie z usługi byłoby korzystne, jeśli po wybraniu wejścia strona przewinęła się w dół, więc dane wejściowe znajdowały się u góry strony. W ten sposób wiele z poniższej listy będzie widocznych podczas pisania. Czy jest to możliwe i czy ktoś ma takie doświadczenie? Dzięki

Answer 1

Uzgodnione - byłoby miło dla użyteczności.

Jeśli używasz jQuery, to powinno załatwić sprawę:

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

Answer 2

Lepszym rozwiązaniem byłoby:

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

Ponieważ offsetTop (lub .offset().top jeśli jQuery) zwracają odległość od pierwszego ustawionego rodzica, gdzie potrzebna jest odległość od wierzchołka document.

getBoundingClientRect().top zwraca odległość między bieżącą pozycją rzutni dla elementu, np. jeśli przewiniesz 300px poniżej elementu, zwróci on -300. Dodanie odległości za pomocą += spowoduje przewinięcie do elementu. -10 jest opcjonalne - aby zwolnić trochę miejsca na górze.