JavaScript ResizeObserver — зміна розміру елемента

ResizeObserver повідомляє про зміну розміру елемента — не вікна.

правити

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

Подія resize на window знає лише про вікно. Але елемент може змінити розмір і без нього: сусід зник, з'явився текст, розкрився блок, змінилась сітка.

Спостерігач бачить саме це. Він і став основою адаптивних компонентів: віджет підлаштовується під ширину свого контейнера, а не під ширину екрана — те саме, що в CSS роблять контейнерні запити.

Типові застосування: перемалювати графік, коли колонка змінила ширину; підігнати розмір <canvas> під контейнер; перерахувати кількість видимих елементів.

правити

Нотатка

Змінювати розмір спостережуваного елемента всередині обробника — прямий шлях до нескінченного циклу. Браузер у такому разі кине в консоль попередження про «loop limit exceeded».

автор: NagarD правити

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

Синтаксис

const observer = new ResizeObserver(callback);\nobserver.observe(element);

методи

Переглядачі

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

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

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

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

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

Приклади

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

<div id="card" style="resize: horizontal; overflow: auto; width: 300px">
    Потягни за правий нижній кут
</div>

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

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

        // рішення за розміром КОНТЕЙНЕРА, не вікна
        entry.target.classList.toggle('narrow', width < 400);

        console.log('Ширина:', Math.round(width));
    }
});

observer.observe(card);

// коли компонент знищується
// observer.unobserve(card);