Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить IntersectionObserver?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`IntersectionObserver`** - це потужний вбудований API браузера, який дозволяє відстежувати, коли елемент потрапляє в область видимості (viewport) чи виходить з неї, без важких обробників `scroll`. **Ключове:** він працює асинхронно і ефективно, замінюючи ручні перевірки `getBoundingClientRect()` та навантажені `onscroll`-обробники.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`IntersectionObserver` - це потужний вбудований API браузера, який дозволяє **відстежувати, коли елемент потрапляє в область видимості (viewport)** або виходить з неї - без важких обробників `scroll`. --- ## Просте визначення > `IntersectionObserver` - це об'єкт, який "спостерігає" за елементом і повідомляє, > коли він **перетинається з областю перегляду** (чи з іншим контейнером). Це чудова альтернатива: - подіям `scroll`, - ручним перевіркам `getBoundingClientRect()`, - або обробникам `window.onscroll`, які сильно навантажують сторінку. --- ## 1. Простий приклад ```javascript <div style="height: 120vh;"></div> <div id="target" style="height: 100px; background: coral;">Я ціль</div> <div style="height: 120vh;"></div> <script> const target = document.querySelector('#target'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { console.log('Елемент з\'явився в зоні видимості!'); } else { console.log('Елемент вийшов із зони видимості!'); } }); }); observer.observe(target); // починаємо спостерігати </script> ``` Коли ти прокрутиш сторінку і блок потрапить на екран, у консоль виведеться: ```javascript Елемент з'явився в зоні видимості! ``` --- ## 2. Параметри конструктора ```javascript new IntersectionObserver(callback, options); ``` | Параметр | Що робить | |---|---| | `callback` | Функція, яка викликається при кожному перетині | | `options.root` | Контейнер, всередині якого відстежувати (за умовчанням - вікно браузера) | | `options.rootMargin` | Відступи (наприклад `'0px 0px -100px 0px'`), як у CSS `margin` | | `options.threshold` | Поріг спрацьовування - частка видимості елемента (від 0 до 1) | --- ### Приклад з налаштуваннями: ```javascript const observer = new IntersectionObserver(callback, { root: null, // вікно браузера rootMargin: '0px 0px -100px 0px', // спрацює трохи раніше threshold: 0.5 // коли видно 50% елемента }); ``` --- ## 3. Об'єкт `entry` у колбеку Кожен елемент, за яким стежить спостерігач, представлений об'єктом `IntersectionObserverEntry`: ```javascript entry.isIntersecting // true / false entry.intersectionRatio // частка видимої частини (0-1) entry.boundingClientRect // положення елемента entry.rootBounds // межі області видимості entry.target // сам елемент ``` --- ## 4. Приклад: плавна поява елементів ```javascript const items = document.querySelectorAll('.fade'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }); items.forEach(item => observer.observe(item)); ``` ```javascript .fade { opacity: 0; transform: translateY(20px); transition: 0.5s; } .fade.visible { opacity: 1; transform: translateY(0); } ``` Елементи плавно "спливають", коли потрапляють на екран. --- ## 5. Приклад: **лінива загрузка зображень** ```javascript <img data-src="photo.jpg" alt="photo" width="400" height="300" /> ``` ```javascript const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries, obs) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; obs.unobserve(img); // перестаємо стежити за цією картинкою } }); }); images.forEach(img => observer.observe(img)); ``` Тепер зображення завантажуються **тільки тоді, коли стають видимими** - це економить трафік і прискорює завантаження сайту. --- ## 6. Переваги перед обробниками `scroll` | Звичайний scroll | IntersectionObserver | |---|---| | Викликає подію на **кожному пікселі** | Працює асинхронно й ефективно | | Потрібно вручну рахувати `getBoundingClientRect()` | Все робить сам | | Навантаження на CPU | Майже нульове навантаження | | Незручно з великою кількістю елементів | Спостерігач може стежити за сотнями елементів | --- ## 7. Зупинка спостереження Щоб перестати стежити за елементом: ```javascript observer.unobserve(target); ``` Щоб повністю відключити: ```javascript observer.disconnect(); ``` --- ## Підсумок | Що робить | `IntersectionObserver` | |---|---| | Відстежує | Коли елемент входить або виходить з області видимості | | Замінює | `onscroll` та `getBoundingClientRect()` | | Використовується для | Лінивого завантаження, анімацій при скролі, відстеження реклами, аналітики | | Продуктивність | Дуже висока (працює поза основним потоком JS) | --- > **Запам'ятай просто:** > `IntersectionObserver` - це "спостерігач за видимістю". > Він повідомляє, коли елемент з'явився на екрані, > і робить це ефективно, без зайвих подій `scroll`.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.