Как понять что элемент скрыт?

Как понять что элемент скрыт

Для проверки видимости элемента в DOM существует несколько подходов, каждый работает для разных случаев скрытия.

Основные способы скрытия элементов

display: none — удаляет элемент из layout

const isHidden = window.getComputedStyle(element).display === 'none';

visibility: hidden — скрывает элемент, но занимает место

const isHidden = window.getComputedStyle(element).visibility === 'hidden';

opacity: 0 — делает элемент прозрачным

const isHidden = parseFloat(window.getComputedStyle(element).opacity) === 0;

Проверка через размеры элемента

// Если размеры нулевые, элемент скрыт
function isElementVisible(element) {
  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
}

const element = document.querySelector('.box');
console.log(isElementVisible(element)); // true/false

Это работает для всех способов скрытия:

• offsetWidth === 0 при display: none
• getClientRects().length === 0 при вывода элемента из потока

Проверка видимости в viewport

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top < window.innerHeight &&
    rect.bottom > 0 &&
    rect.left < window.innerWidth &&
    rect.right > 0
  );
}

Современный способ: IntersectionObserver

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим');
    } else {
      console.log('Элемент вне viewport');
    }
  });
});

observer.observe(element);

IntersectionObserver — это наиболее эффективный способ определения видимости, он не требует постоянного слушания скролла.

Комплексная проверка

function isFullyHidden(element) {
  // Проверка display
  if (getComputedStyle(element).display === 'none') return true;
  
  // Проверка visibility
  if (getComputedStyle(element).visibility === 'hidden') return true;
  
  // Проверка opacity
  if (parseFloat(getComputedStyle(element).opacity) === 0) return true;
  
  // Проверка размеров
  if (element.offsetHeight === 0 || element.offsetWidth === 0) return true;
  
  // Проверка родителя
  if (element.parentElement) {
    return isFullyHidden(element.parentElement);
  }
  
  return false;
}

Практический пример: lazy loading изображений

function setupLazyImages() {
  const images = document.querySelectorAll('[data-src]');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  
  images.forEach(img => observer.observe(img));
}

Выбор подхода

• getComputedStyle() — для проверки CSS свойств (display, visibility, opacity)
• offsetHeight/offsetWidth — для быстрой проверки, скрыт ли элемент
• getBoundingClientRect() — для проверки видимости на экране
• IntersectionObserver — лучший выбор для эффективной работы с видимостью (рекомендуется)