Check if an element is visible in a scrollable container

The following functions return true if the ele element is visible in its scrollable container:

const isVisible = function(ele, container) {
const eleTop = ele.offsetTop;
const eleBottom = eleTop + ele.clientHeight;

const containerTop = container.scrollTop;
const containerBottom = containerTop + container.clientHeight;

// The element is fully visible in the container
return (eleTop >= containerTop && eleBottom <= containerBottom) ||
// Some part of the element is visible in the container
(eleTop < containerTop && containerTop < eleBottom) ||
(eleTop < containerBottom && containerBottom < eleBottom);
};

We also can perform the check based on the bounding rectangles of both element and container:

const isVisible = function(ele, container) {
const { bottom, height, top } = ele.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();

return top <= containerRect.top
? (containerRect.top - top <= height)
: (bottom - containerRect.bottom <= height);
};

More

Previous
Check if an element is scrollable
Next
Check if the code is running in the browser