在移动设备的文本输入焦点上滚动页面？答案

【问题标题】：Scroll page on text input focus for mobile devices?在移动设备的文本输入焦点上滚动页面？
【发布时间】：2012-05-23 12:23:31
【问题描述】：

我正在制作一个带有文本输入的移动优化网站，它会在您键入时过滤列表。它类似于：http://jquerymobile.com/test/docs/lists/lists-search.html

对于手机，如果您在选择输入时页面向下滚动以使输入位于页面顶部，这将有助于提高可用性。这样，当您键入时，下面的列表中的大部分内容都将可见。这可能吗和/或有人有这样做的经验吗？谢谢

【问题讨论】：

标签： mobile user-experience

【解决方案1】：

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

【讨论】：

编辑您的帖子并使用代码格式。还可以考虑在您的代码中添加任何解释。

【解决方案2】：

同意 - 这对可用性很有好处。

如果您使用的是 jQuery，这应该可以解决问题：

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

【讨论】：

谢谢！有没有在页面中间滚动的选项？
document.body.scrollTop = $(this).offset() + (window.innerHeight / 2);也许？但是您需要确保屏幕键盘不会与输入重叠（而且您不知道 X 可能会在设备 Y 上使用什么疯狂的键盘），所以 top 可能更安全。
在 Angular 中也可以这样做吗？
@Siyah Angular 是一个框架而不是一个 DOM 库，所以通常你会使用 jQuery 来做这种事情（或者只是普通的 JS：youmightnotneedjquery.com/#on）。

【解决方案3】：

更好的解决方案是：

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

因为offsetTop（或.offset().top，如果使用Jquery）返回到第一个定位的父级的距离，而您需要到document顶部的距离。

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

【讨论】：

在 Angular 中也可以这样做吗？
你不见了）；最后
添加了缺少的);