mobile - モバイル デバイスのテキスト入力フォーカスでページをスクロールしますか?

Question

入力時にリストをフィルタリングするテキスト入力を使用して、モバイルに最適化されたサイトを作成しています。これに似ています: http://jquerymobile.com/test/docs/lists/lists-search.html

電話の場合、入力を選択したときにページが下にスクロールされ、入力がページの上部にあると、使いやすさが向上します。そうすれば、入力したとおりに以下のリストが表示されます。これは可能ですか、および/または誰かがそれを行った経験がありますか? ありがとう

Answer 1

同意しました-それは使いやすさにとっていいでしょう。

jQuery を使用している場合、これでうまくいくはずです。

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

Answer 2

より良い解決策は次のとおりです。

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

offsetTop（または.offset().topJqueryを使用している場合）最初に配置された親からの距離を返すため、の上部からの距離が必要ですdocument。

getBoundingClientRect().top現在のビューポート位置から要素までの距離を返します。要素の下に 300 ピクセルスクロールすると、 が返され-300ます。したがって、使用して距離を追加する+=と、要素にスクロールします。-10はオプションです - 上部にスペースを確保するためです。

Answer 3

$('input, textarea').focus(function () {
    $('html, body').animate({ scrollTop: ($('input, textarea').offset().top - 10) }, 1);
    return false;
});