ResizeObserver: размерът на компонент, а не само на прозореца

Полезно е да знаеш

ResizeObserver съобщава промени в размерите на съдържателната или рамковата кутия на елемент. Това е различен въпрос от „промени ли се размерът на прозореца“. Контейнер може да се свие заради отворен страничен панел, без прозорецът да е променен. [1]

Представи си диаграма в административен панел. Когато навигацията се разгъне, свободната ширина за диаграмата намалява. Наблюдение на нейния контейнер позволява да преизчислиш подредбата според реално наличното пространство.

Избери коя кутия измерваш. Content box е мястото за съдържание; border box включва и вътрешните отстояния и рамката. [1] Несъответствие между измерването и използваната ширина може да доведе до неправилни изчисления.

Не променяй безконтролно наблюдавания размер в отговор на всяка промяна. Така лесно се създава цикъл от измерване и нова промяна. Проверявай дали новото състояние действително е различно и прекратявай наблюдението, когато компонентът се премахне.