We can find plenty of answers about how to check if an element is visible.
In my case the one which works with opacity
, and into a scrollable area, is this one (that I have optimized):
function isScrolledIntoView(el, holder) { var bndElem = el.getBoundingClientRect(); var bndHolder = holder.getBoundingClientRect(); return bndElem.top <= bndHolder.top ? !(bndHolder.top - bndElem.top > bndElem.height) : !(bndElem.bottom - bndHolder.bottom > bndElem.height); }