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

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().topのjQueryを使用している場合）を返します最初の位置からの距離親、documentの上からの距離が必要です。

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