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

更好的解决方案是：

offsetTop

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

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

Answer 3

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

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

3 个答案: