确定元素是在页面折叠上方还是下方

Question

我有一些页面有多个输入框，用户可以在其中输入文本。其中一些需要在单击“下一步”按钮之前填写。我有验证错误弹出供用户查看但是如果问题是否离开页面我希望页面滚动到它而不是他们必须搜索丢失/错误的字段。

我有一个滚动到位，但我无法确定要滚动到哪个元素的哪个元素。例如，如果输入位于页面折叠上方，我想滚动到标签，以便他们可以看到错误和输入。但如果它低于折叠，我想选择输入，以便显示在折叠上方。这有任何意义吗？

我想我真正要问的是，有没有办法确定元素在页面上的位置。如果它在折叠上方滚动到标签，但如果它在折叠下方则滚动到输入？

现在我只是滚动到错误的输入字段。

$(".container-content").mCustomScrollbar("scrollTo",$('.container-content').find('input.error:first')); //Yes I am using a plugin for the scroll

如果我只是滚动到标签，那么它看起来像这样。在此处输入图片说明

Answer 1

您可以使用此功能：Jsfiddle

function isElementInViewport (el) {
    var rect = el[0].getBoundingClientRect();
    return (rect.top>-1 && rect.bottom <= $(window).height());
}

最初发布在这里