Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Колбэк по изменению размера элемента на странице – ResizeObserver

В 64 версии хрома появился новый функционал ResizeObserver. Теперь можно реагировать на изменения размера элементов, без привязки к ресайзу окна. До этого момента нужно было хранить состояние элементов в переменной и если происходили изменения в расположении, то обновлялась переменная и как результат можно было что-то делать.

Плюс новые размеры элементов можно было получить только используя “дорогой” методы вроде getBoundingClientRect(), который вызывает перерисовку всего окна. Теперь же, после изменения размеров, можно сразу получить все данные без перерисовки.

Пример:

(точно работает в 64 хроме, больше нигде не тестировал)

Поделиться:
comments powered by Disqus