Определите, есть ли больше места ниже или выше элемента в DOM

Question

Обычно у меня есть поле ввода, и я хочу отобразить div, содержащий список ниже ИЛИ над ним, в зависимости от того, где больше места. поскольку в некоторых случаях это поле ввода может быть внизу страницы или, возможно, посередине или вверху. Поэтому я подумал об использовании порта просмотра, чтобы определить, есть ли больше места ниже или выше поля ввода, а затем отобразить div соответственно. Попытка сделать это чисто с некоторыми CSS и html. любые рекомендации будут полезны.

My basi c html структура:

<input/>
<div id="container">
   <ul>
      <li ngFor> 
        <span> field1 </span>
        <span> field2 </span>
        <span> field3 </span>
      </li>
   </ul> 
</div>  

Answer 1

Трудно дать полный ответ, не зная, как настроены ваши компоненты, но есть пара функций 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 />

Если вы хотите сделать это на основе пространства в родительском компоненте, вы можете использовать Element.offsetTop и Element.offsetHeight для вычисления пространства между входом и верх / низ своего ближайшего предка:

const element = document.querySelector('input');

const spaceAbove = element.offsetTop
const spaceBelow = element.parentNode.offsetHeight - (element.offsetTop + element.offsetHeight)

if (spaceAbove > spaceBelow) {
  // do something
} else {
  // do something else
}

<div style="padding: 200px 0 100px 0; position:relative">
<input />
</div>