JavaScript ResizeObserver.observe() — стежити за розміром елемента

Метод observe() починає стежити за зміною розміру елемента.

правити

Загальний опис

Як і в спостерігача перетину, обробник спрацьовує одразу — щоб повідомити поточний розмір. Тобто окремо міряти елемент при ініціалізації не треба.

Опція box каже, що саме міряти: content-box (лише вміст, за замовчуванням) чи border-box (разом із рамкою й полями). Різниця стає болючою, коли в елемента є padding.

Розмір приходить у entry.contentRect — там і ширина, і висота.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
observe	64+	69+	13.1+	51+	79+	-

Підтримка: мобільні переглядачі

Переглядач
observe	64+	yes	yes	13.4+

Приклади

+ запропонувати свій приклад у пісочниці

<div id="card">Картка</div>

#card {
    width: 300px;
    background: #eef6ff;
    padding: 8px;
}

const card = document.getElementById('card');

const observer = new ResizeObserver(entries => {
    for (const entry of entries) {
        const { width } = entry.contentRect;

        // рішення за розміром КОНТЕЙНЕРА, не вікна
        entry.target.classList.toggle('narrow', width < 250);
        console.log('Ширина картки:', Math.round(width));
    }
});

observer.observe(card, { box: 'border-box' });

// обробник спрацьовує одразу після observe — і на кожну зміну розміру
setTimeout(() => {
    card.style.width = '200px';
}, 500);