标识DOM中元素的上方还是下方有更多空间
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了标识DOM中元素的上方还是下方有更多空间相关的知识，希望对你有一定的参考价值。
基本上，我有一个输入字段，并希望显示div，该div包含下方或上方的列表，这取决于有更多空间。因为在某些情况下，此输入字段可能位于页面底部，也可能位于中间或顶部。因此，我想到了使用查看端口来识别输入字段下方或上方是否还有更多空间，然后相应地显示div。纯粹使用一些CSS和html来尝试。任何建议都会有所帮助。
我的基本HTML结构：
<input/>
<div id="container">
<ul>
<li ngFor>
<span> field1 </span>
<span> field2 </span>
<span> field3 </span>
</li>
</ul>
</div>
答案
在不知道组件的设置方式的情况下很难给出完整的答案，但是有一些HTML功能可能对您有所帮助，这取决于您是根据视口内上方还是下方的空间还是上方的空间来选择。 /在父组件内。
如果要基于视口中的空间进行操作，则可以使用Element.getBoundingClientRect()查找输入与视口顶部/底部之间的距离：
const element = document.querySelector('input');
const elementRect = element.getBoundingClientRect();
const spaceAbove = elementRect.top;
const spaceBelow = window.innerHeight - elementRect.bottom;
if (spaceBelow < spaceAbove) {
// logic to render with more space above input
} else {
// logic to render with more (or equal) space on bottom
}<input />以上是关于标识DOM中元素的上方还是下方有更多空间的主要内容，如果未能解决你的问题，请参考以下文章