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

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)返回距离第一个定位父项的距离,因为您需要距离顶部的距离getBoundingClientRect().top.

-300返回当前视口位置与元素之间的距离,如果您在元素下方滚动300px,它将返回+=.因此,添加距离-10将滚动到元素.offsetTop是可选的 - 允许顶部的一些空间.