Megas
@Megas

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

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

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

Какие еще могут быть решения?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Megas
@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);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@xSoal
а вариант el.clientHeight не подходит?
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Ловить событие hover на ссылке.

UPD
для всех изменений, связанных с js - MutationObserver (jsfiddle)
все остальные - генерятся через события, которые можно легко отследить

Ссылки:
https://developer.mozilla.org/ru/docs/Web/API/Muta...
https://caniuse.com/?search=MutationObserver (global: 97.42%)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы