ResizeObserver: размер компонента вместо размера окна

Открылась боковая панель, график стал уже, а событие resize окна не сработало. Размер окна ведь не изменился — изменился его внутренний блок. ResizeObserver позволяет следить за самим контейнером. Покажем подписку, обновление графика и случай, когда обработчик размеров сам запускает бесконечную цепочку изменений.

Наблюдаем за контейнером

const container = document.querySelector('.chart-container');
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    drawChart(entry.contentRect.width, entry.contentRect.height);
  }
});
observer.observe(container);
// При удалении компонента:
// observer.disconnect();

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

Когда обработчик запускает сам себя

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

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

Удаление и повторное создание графика

Измените ширину панели, откройте скрытую вкладку, затем удалите компонент. График должен обновляться, а наблюдение — отключаться после удаления. Обработайте нулевой размер без деления на ноль. При повторном появлении компонента создайте подписку снова в подходящем месте его жизненного цикла.

Источники и дальнейшее чтение

• MDN: ResizeObserver
• MDN: observe