API Наблюдателя за Изменением Размера

API Наблюдателя за Изменением Размера предоставляет эффективный механизм для отслеживания изменений размера элемента, при этом уведомления об этих изменениях будут доставляться наблюдателю каждый раз, когда размер меняется.

Существует множество вариантов использования для техник адаптивного дизайна (и других) которые реагируют на изменения размера элемента, но ранее их реализации часто были ненадёжными и/или хрупкими.

Например, запросы на медиа / window.matchMedia отлично подходят для обновления макета в определённые моменты, когда меняется размер области просмотра, но что если вы хотите изменить макет в ответ на изменение размера конкретного элемента, а не внешнего контейнера?

Для достижения этой цели можно использовать ограниченное решение — прослушивать изменения подходящего события, которое указывает на элемент, размер которого вас интересует (например, событие resize окна), а затем определить новые размеры или другие параметры элемента после изменения размера с помощью Element.getBoundingClientRect или Window.getComputedStyle.

Такое решение, как правило, работает только для ограниченного числа случаев, плохо сказывается на производительности (постоянный вызов указанных методов приводит к существенному снижению производительности) и часто не работает, когда размер окна браузера не изменяется.

API Наблюдателя за Изменением Размера предоставляет решение для подобных проблем, позволяя легко наблюдать и реагировать на изменения размера области содержимого или границы элемента. Это JavaScript-решение часто обсуждаемой проблемы отсутствия запросов на элементы в веб-платформе.

Использование простое и практически идентично другим наблюдателям, таким как Performance Observer или Intersection Observer — вы создаёте новый объект ResizeObserver с помощью конструктора ResizeObserver(), а затем используете ResizeObserver.observe(), чтобы он отслеживал изменения размера определённого элемента. Функция обратного вызова, настроенная внутри конструктора, выполняется каждый раз, когда размер меняется, предоставляя доступ к новым размерам и позволяя вам выполнять любые действия в ответ на эти изменения.

ResizeObserver

Обеспечивает возможность регистрации новых наблюдателей и начала/остановки наблюдения за элементами.

ResizeObserverEntry

Описывает отдельный элемент, размер которого был изменён, определяя элемент и его новый размер.

Несколько простых примеров можно найти в нашем репозитории GitHub:

• resize-observer-border-radius.html (посмотреть исходный код): Простой пример с зелёным прямоугольником, размер которого задан в процентах от размера области просмотра. При изменении размера области просмотра закруглённые углы прямоугольника меняются пропорционально его размеру. Мы могли бы реализовать это с помощью border-radius и процентов, но это быстро приведёт к некрасивым эллиптическим углам, в то время как вышеприведённое решение даёт вам красивые закруглённые углы, масштабируемые вместе с размером прямоугольника.
• resize-observer-text.html (посмотреть исходный код): Здесь мы используем наблюдатель изменений размера для изменения размера шрифта font-size заголовка и абзаца по мере изменения значения ползунка, что приводит к изменению ширины содержащего <div> элемента. Это демонстрирует, что можно реагировать на изменения размера элемента, даже если они никак не связаны с областью просмотра.

Код обычно следует этому образцу (взято из resize-observer-border-radius.html):

const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

• ResizeObserver: Это как document.onresize для элементов