Нативная проверка, находится ли элемент в зоне видимости!

Когда нужно показать подсказку только если элемент действительно в зоне просмотра, подсветить активный пункт меню, автоплейнуть видео или зафиксировать секцию — можно использовать нативный 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 | #практика