How to find the position of the first list item outside a container?

I have a div container and inside it a list of items. The list is bigger than container's height and the container has overflow:hidden. How can I find the position of the first list item that isn't displayed by the container?

You could use getBoundingClientRect() to compare elements' bounds with the container's bottom position.

The only problem is the horizontal scrollbar, but that could be a very special case which is rare in web UI.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const container = document.querySelector('.container');

const borderWidth = parseInt(getComputedStyle(container).borderBottomWidth);
const containerBottom = container.getBoundingClientRect().bottom - borderWidth;

let hiddenPartial;

container.addEventListener('scroll', checkHidden);
checkHidden();

function checkHidden() {

  hiddenPartial?.classList.remove('partial');

  hiddenPartial = [...container.children].find(elem => {
    const {top, bottom } = elem.getBoundingClientRect();
    return top < containerBottom && bottom > containerBottom; 
  });
  
  hiddenPartial?.classList.add('partial');

  $partial.textContent = 'The first child hidden partially: ' + hiddenPartial?.textContent;

  const hiddenFull = [...container.children].find(elem => elem.getBoundingClientRect().top > containerBottom);

  $full.textContent = 'The first child hidden fully: ' + hiddenFull?.textContent;

};

<!-- language: lang-css -->

.container {
  border: 15px solid gray;
  height:70px;
  overflow:auto;
  padding: 20px;
  border-radius: 4px;
}
p{
  border: 1px solid lightgray;
  border-radius: 4px;
  padding: 5px 10px;
}

.partial{
  background: yellow;
  border-color:red;
}

<!-- language: lang-html -->

<div class="container">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
</div>
<div id="$partial"></div>
<div id="$full"></div>

<!-- end snippet -->