web-dev-qa-db-ja.com

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

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

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

mobileuser-experience
13
Evanss

同意しました-それは使いやすさのためにいいでしょう。

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

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

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

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

offsetTop（またはJqueryを使用している場合は.offset().top）は、最初に配置されたparentからの距離を返しますが、document。

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

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