javascript - 输入类型文本 - 如何根据其在网页中的位置在下方或上方添加 div

Question

我的页面中有一个文本字段:

<input type='text' />

我有一些逻辑，如果输入某些内容，下面会出现一个 div。(div 就像组合中的弹出窗口，给你一个想法)

问题是，如果文本字段位于页面底部，我宁愿 div 出现在文本字段的顶部。

有没有简单的方法可以做到这一点？

另一种表达方式是:

我怎么知道在另一个 HTML 元素的底部添加一个 div 是否不适合当前页面？

Answer 1

您可以查看元素下方的可用空间，并根据需要确定位置。

var popupTop = <offset-top-of-element> + element.offsetHeight;

if(window.offsetHeight - popupTop > 100) { // change 100 as needed
   // display below
}
else {
   // display above
}

为了找到元素的偏移顶部，您将需要递归添加 parent.offsetTop 直到没有父元素，如以下答案所示:https://stackoverflow.com/a/6780661/921204

注意:我还没有测试 window.offsetHeight 的跨浏览器兼容性。您可能需要相同的多浏览器代码。除此之外，这几乎适用于所有浏览器。