Code Ready | Frontend
@code_ready
Нативная проверка, находится ли элемент в зоне видимости!
Когда нужно показать подсказку только если элемент действительно в зоне просмотра, подсветить активный пункт меню, автоплейнуть видео или зафиксировать секцию — можно использовать нативный getBoundingClientRect().
Проверяем частичную вертикальную видимость элемента в зоне просмотра:
function isVisible(el) {
const r = el.getBoundingClientRect();
return r.top < window.innerHeight && r.bottom > 0;
}
Использование:
const box = document.querySelector(".box");
console.log("Виден:", isVisible(box));
Наблюдение за видимостью при скролле:
window.addEventListener("scroll", () => {
if (isVisible(box)) {
console.log("Элемент в зоне просмотра");
}
});
Мини-вариант для группы элементов:
document.querySelectorAll(".item").forEach(el => {
if (isVisible(el)) {
el.classList.add("active");
}
});
Подходит для ленивых анимаций, подсветки активных блоков и аналитики скролла. А если нужен более точный и энергоэффективный вариант — используйте IntersectionObserver.
Code Ready | #практика
Если у вас установлено приложение,
вы можете сразу перейти в канал
вы можете сразу перейти в канал