Как обнаружить появление ранее скрытого елемента в браузере?

Question

[Megas]

Работаю над небольшой аналитической программой (на JavaScript'e) и сталкнулся со следующей проблемой: у сайта есть невидимые элементы, которые в какой то момент становятся видимыми. К примеру как тут: https://www.wildearth.com.au/ вверху меню, при наведении мышки, появляется саб-меню. Нужно каким то образом обнаруживать когда ссылки внутри саб-меню видимы для пользователся. Саб-меню отображается методами CSS при :hover над элементом в главном меню. Структура сайта изначально неизвестна, так что повесить хендлеры на нужные элементы не получится, решение должно работать для любого сайта.

Что уже пробовал/знаю:
1) Если у ссылки внутри саб-меню проверить CSS свойство через window.getComputedStyle(element).display, то выдает, что элемент видим. Только нулевые значения в element.getBoundingClientRect() выдают, что элемент сейчас невидим
2) Думал что MutationObserver поможет, но оказалось, что в данном случае изменения DOM нету, так что обсервер не срабатывает.

Какие еще могут быть решения?

Answer 1

[Megas]

Если кто столкнется с подобной проблемой, то нашел решение с помощью Intersection Observer API. Пример кода:

const onIntersectionChange = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            //Элемент стал видим. Выполняем тут логику аппликации, а затем удаляем обсервер
            observer.unobserve(entry.target);
        }
    });
};

const intersectionObserver = new IntersectionObserver(onIntersectionChange, {
    threshold: 0.5
});

watchingElements.forEach(element => {
    intersectionObserver.observe(element);
});

Answer 2

[xSoal]

а вариант el.clientHeight не подходит?

Comments

[Megas]

И как оно поможет? Не отслеживать же мне по таймеру изменение этого параметра у всех скрытых элементов.