JavaScript: видимость элемента в scroll-контейнере

Категория: JavaScript

Функция 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

категория: JavaScript