Как определить изменение состояния видимости элемента?

Ссылка скопирована
JavaScript
4 апреля 2026 1 ответ

Допустим, есть у нас модельное окно которое естественно скрыто черед свойство display. В модельном окне, есть некая панель, в панели имеется выпадающий список который тоже скрыт через свойство display. В этом меню есть компонент который использует функции по типу getBoundingClientRect, getComputedStyle и т.д. и т.п. Вопрос, как можно подписаться на событие при котором модальное окно как и вып. список открыты? То есть, все родительские элементы как и сам конечный элемент видны. Есть ли способ запускать код всякий раз когда элемент становится видимым?

ПС: Структура только для примера!!! Вложенность может быть произвольной.

Дополнительно:

Кинь обоих в MutatuionObserver на атрибут style, там проверку какую надо производи

  • imko, Немного почитал на эту тему, похоже что в этом случае лучше использовать IntersectionObserver? Потому что io можно бросить только на конечный элемент. а в случае с MutatuionObserver всю цепочку нужно отслеживать. а у меня структура вложенности может быть произвольной.
  • Дмитрий, интерсекшон другое делает, попадание в области видимости. В принципе если выпадашка из списка является не реальным списком опций а своими элементами эмулирующими селект то можно и через него замутить. В переменной хранить "открытость" модала и с ней сверяться на открытие (срабатывание ИО). Возмодно сработает даже с настоящим селектом если следить за option но мне кажется маловероятно

    • Расширю ответ imko кодом:

    // return true, if element visible function isVisible(element) {   return window.getComputedStyle(element).display !== 'none'; }  // MutationObserver const observer = new MutationObserver((mutations, obs) => {   const modal = document.querySelector('#modalWindow'); // modal selector   const dropdown = document.querySelector('#dropdownMenu'); // dropdown menu selector    // check is visible?   if (isVisible(modal) && isVisible(dropdown)) {     console.log('Element is visible');     obs.disconnect();   } });  // config const config = {   attributes: true,   attributeFilter: ['style'] }  // run observer.observe(document.querySelector('#modalWindow'), config); observer.observe(document.querySelector('#dropdownMenu'), config);

    // return true, if element visible function isVisible(element) { return window.getComputedStyle(element).display !== 'none'; } // MutationObserver const observer = new MutationObserver((mutations, obs) => { const modal = document.querySelector('#modalWindow'); // modal selector const dropdown = document.querySelector('#dropdownMenu'); // dropdown menu selector // check is visible? if (isVisible(modal) && isVisible(dropdown)) { console.log('Element is visible'); obs.disconnect(); } }); // config const config = { attributes: true, attributeFilter: ['style'] } // run observer.observe(document.querySelector('#modalWindow'), config); observer.observe(document.querySelector('#dropdownMenu'), config);

    • Спасибо! Уже разобрался. Я повесил все на ResizeObserver с проверкой что элемент в момент вызова виден. Так логичнее, ибо пересчёт нужно было делать после изменения размера родителя или конечного элемента.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Андрей PHP Ответ

    Для определения изменения состояния видимости элемента на веб-странице можно использовать методы JavaScript. Существует несколько способов проверки видимости элемента, в зависимости от конкретной ситуации.

    Один из самых распространенных способов - использование свойства `display` или `visibility` в стилях элемента. Например, если элемент скрыт с помощью CSS свойства `display: none;`, то можно проверить его видимость следующим образом:

    if (element.style.display === 'none') {
  // Элемент скрыт
} else {
  // Элемент видим
}

    if (element.style.display === 'none') { // Элемент скрыт } else { // Элемент видим }

    Еще один способ - использование методов `getComputedStyle` и `getPropertyValue` для получения актуальных стилей элемента. Например:

    var elementStyle = window.getComputedStyle(element);
if (elementStyle.getPropertyValue('display') === 'none') {
  // Элемент скрыт
} else {
  // Элемент видим
}

    var elementStyle = window.getComputedStyle(element); if (elementStyle.getPropertyValue('display') === 'none') { // Элемент скрыт } else { // Элемент видим }

    Также можно проверить видимость элемента относительно его родителя, используя методы `offsetParent` и `offsetTop`. Например:

    if (element.offsetParent === null || element.offsetTop === 0) {
  // Элемент скрыт
} else {
  // Элемент видим
}

    if (element.offsetParent === null || element.offsetTop === 0) { // Элемент скрыт } else { // Элемент видим }

    Наконец, можно использовать метод `getBoundingClientRect` для определения видимости элемента на экране. Например:

    var elementRect = element.getBoundingClientRect();
if (elementRect.width > 0 && elementRect.height > 0) {
  // Элемент видим
} else {
  // Элемент скрыт
}

    var elementRect = element.getBoundingClientRect(); if (elementRect.width > 0 && elementRect.height > 0) { // Элемент видим } else { // Элемент скрыт }

    Выбор конкретного метода зависит от того, каким образом элемент скрывается или отображается на странице. В любом случае, эти способы позволят определить изменение состояния видимости элемента и выполнить необходимые действия в зависимости от этого.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Safari Почему снова флагнули домен в safari? 0 ответов