Is it possible, and if so, what is the best way to determine if an element is overflown or visible?

Question

css

Hello, I have a question.
Below the pens, there is a div that looks like a carousel, with elements positioned horizontally. Some of the elements may not fit, so the scroll.
The question is - is it possible to determine in such a construction whether the very last element is hidden or already visible?
Those. if, for example, you declare a boolean variable isVisible for the .flex-box:last-child selector, then this variable would take the value false if the last element is still hidden (even if only partially) and true if it is already fully visible?

Answer 1

From a parent you need to dance.

document.querySelector('.flex-container').addEventListener('scroll', (e) => {
  const w = e.target;

  if (w.offsetWidth + w.scrollLeft >= w.scrollWidth) {
    // элемент проскроллен до конца, то есть последний элемент полностью видим
  }
})