JavaScript: видимость элемента в scroll-контейнере
Функция javascript для проверки виден ли элемент в контейнере со скроллом.
Способ определения виден ли элемент в области скролла на JavaScript:
function isElementVisible(el, holder, isEntire = false) {
const hasVerticalScroll = (holder.scrollHeight > holder.clientHeight);
const hasHorizontalScroll = (holder.scrollWidth > holder.clientWidth);
const holderRect = holder.getBoundingClientRect();
const childRect = el.getBoundingClientRect();
if (hasVerticalScroll) {
if (isEntire) {
return childRect.top >= holderRect.top && childRect.bottom <= holderRect.bottom;
}
return childRect.top <= holderRect.top
? holderRect.top - childRect.top <= childRect.height
: childRect.bottom - holderRect.bottom <= childRect.height;
}
if (hasHorizontalScroll) {
if (isEntire) {
return childRect.left >= holderRect.left && childRect.right <= holderRect.right;
}
return childRect.left <= holderRect.left
? holderRect.left - childRect.left <= childRect.width
: childRect.right - holderRect.right <= childRect.width;
}
}
#javascript, #scroll, #element visible, #javascript is element visible