在Mozilla和IE中标记输入不向上滚动查看

时间:2013-08-29 14:31:34

标签: jquery html css cross-browser

对于我正在处理的网站,我有一个很长的form,并且有两列inputs。当用户通过inputs选项卡时,视图会向下滚动以使焦点字段保持在视图中。当用户到达第一列的底部并且选项卡焦点转到第二列的顶部时,视图不会向上滚动以跟随焦点,而是仅在Mozilla和IE中。当我在Chrome上测试时,视图将向上滚动以保持焦点输入字段在视图中。

有没有人知道如何处理这个跨浏览器问题并让页面自动向上滚动浏览Mozilla和IE?

2 个答案:

答案 0 :(得分:2)

我无法在任何浏览器上重现这一点,但如果您使用的是jquery,则可以尝试将其添加到您的javascript中,看看它是否有帮助。

$(function() {
    $("input").on("focus", function() {
         this.scrollIntoView(true);
    });
});

答案 1 :(得分:0)

好的,我发现了问题。我的视图包含了我试图浏览的视图,当向上滚动时,隐藏在另一个视图后面。 Chrome意识到这个观点落后于另一个,但Mozilla却没有。

我的解决方案是使用scrollTop。当我在右上角的输入收到标签焦点时,我将视图滚动到顶部:

$("#org-select").on("select2-focus", function(e) { 
    $("html, body").animate({ scrollTop: 0 }, "fast");
    return false;
});