ResizeObserver: следить за размером элемента, а не только окна

Назначение

ResizeObserver сообщает об изменении размеров наблюдаемого элемента. Это полезно, когда ширина компонента меняется из-за соседней панели или содержимого без изменения размера окна.

Как это работает

Создайте наблюдатель и подключите элемент через observe. В записях доступна информация о размерах; выбранный тип области измерения имеет значение. Когда наблюдение больше не нужно, вызовите unobserve или disconnect.

Пример

const panel = document.querySelector("#size-demo");
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    console.log("Область содержимого:", entry.contentRect.width, entry.contentRect.height);
  }
});
if (panel) observer.observe(panel);
// При завершении работы компонента: observer.disconnect();

Что должно получиться

При изменении области содержимого panel в консоли появляются размеры. Это наблюдение за конкретным элементом; один обработчик window.resize не покрывает все такие изменения.

Граница применения и частая ошибка

Если в callback менять размер того же элемента так, что запускается новый пересчёт, можно получить цикл уведомлений. Не выполняйте тяжёлую работу на каждое изменение без необходимости. Для обычной адаптивной раскладки сначала рассмотрите CSS.

Самостоятельная проверка

Создайте тестовую панель с изменяемой шириной и проверьте уведомления. Затем измените соседний блок без изменения окна. Отключите наблюдатель и убедитесь, что после удаления компонента не остаётся ненужных обработок.

Связанные материалы

• HTTP-статусы
• Журналы сервера
• Проверка запросов