Question

正在制作一个移动优化的网站, 其文本输入过滤您输入的列表。它类似 : < a href="http://jquerymobile. com/ test/docs/lists/ lists/ lists- search. html" rel = “ noreferrer” > http://jquerymobile. com/ test/docs/lists/listss- 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
});

因为 offsecetTop (或 .offsets ().top 如果使用 Jquery) 返回第一个位置的距离 parent , 而您需要从 document 上方的距离。

getBoundingClientRect (). top 返回当前 viewport 位置与元素之间的距离, 也就是说, 如果您在元素下重新滚动300px, 它返回 - 300 。因此, 使用 添加距离将会滚动到元素上。 - 10 是允许在顶部有空间的。

Answer 3

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

友情链接