Перевірка видимості елементів через JavaScript: повний посібник
Привіт:) У цій замітці покажу як перевірити видимість елементів через JavaScript.
У сучасній веб-розробці ми часто маніпулюємо видимістю елементів: показуємо модальні вікна, випадаючі меню або вкладки. Проте іноді скрипту потрібно "знати" напевно, чи бачить користувач конкретний блок у даний момент.
Найбільш надійний спосіб зробити це — використовувати метод window.getComputedStyle().
Основний приклад
Розглянемо структуру, де ми маємо контейнер та цільовий блок, який може бути прихований через CSS.
HTML-розмітка
<div class="wrapper">
<div class="block-1">
<p>Test 1</p>
</div>
</div>JavaScript-логіка
Для перевірки ми отримуємо фінальні (обчислені) стилі елемента. Це важливо, оскільки стилі можуть бути задані у зовнішньому CSS-файлі, а не безпосередньо в атрибуті style.
let block1 = document.getElementsByClassName('block-1')[0];
// Альтернативний варіант:
// let block1 = document.querySelector('.block-1');
if (block1 && window.getComputedStyle(block1).display === 'none') {
console.log('HIDE');
} else {
console.log('DISPLAY');
}Чому ми використовуємо getComputedStyle?
Властивість element.style.display повертає значення лише тоді, коли стиль прописаний інлайново (безпосередньо в тегу HTML). Якщо ж приховування реалізовано через клас у файлі .css, цей підхід не спрацює.
Метод window.getComputedStyle(element) збирає всі активні стилі, що діють на елемент (з таблиць стилів, браузерних стандартів та інлайнових правок), і видає актуальний результат.
Display vs Visibility: у чому різниця?
Замість display можна перевіряти visibility. Проте важливо розуміти технічну різницю:
display: none;— елемент повністю вилучається з розмітки сторінки. Він не займає місця.visibility: hidden;— елемент стає невидимим, але продовжує займати свій простір на сторінці (як "прозорий блок").
Приклад перевірки обох станів:
function isHidden(el) {
const style = window.getComputedStyle(el);
return (style.display === 'none' || style.visibility === 'hidden');
}Інші приклади та корисні поради
Перевірка через властивість offsetParent
Якщо вам потрібно швидко дізнатися, чи займає елемент місце на сторінці (що автоматично означає, що він не має display: none), можна використати такий трюк:
const isVisible = block1.offsetParent !== null;
console.log(isVisible ? 'Елемент у потоці' : 'Елемент прихований');Цей метод працює швидше за getComputedStyle, але він не враховує visibility: hidden.
Сучасний підхід: Intersection Observer
Якщо ваша мета — дізнатися, чи бачить користувач елемент у вікні перегляду (viewport), найкраще використовувати IntersectionObserver. Це дозволяє відстежувати появу елемента при скролі.
Висновок
Вибір методу перевірки залежить від вашої мети. Якщо вам потрібно перевірити логічний стан елемента, заданий через CSS — використовуйте getComputedStyle. Якщо ж ви дбаєте про продуктивність у складних анімаціях — зверніть увагу на геометричні параметри на кшталт offsetHeight або offsetParent.
