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().top如果使用 Jquery）返回与第一个定位的parent的距离，而您需要与document.

getBoundingClientRect().top返回当前视口位置到元素之间的距离，如果您在元素下方滚动 300px，它将返回-300. 因此，使用添加距离+=将滚动到元素。-10是可选的 - 在顶部留出一些空间。

Answer 3

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