Как определить события изменения размера CSS3

Свойство resize CSS3 может быть присвоено произвольным элементам. Я ищу способ определения такого изменения размера, скажем, divs (я не против, чтобы он работал только в FF на данный момент):

div {
  resize: horizontal;
  overflow: hidden;
}

К сожалению, событие onresize, похоже, не запускается в div. Как я могу обнаружить в JavaScript, когда произошло такое изменение размера пользователя?

Изменить: FWIW Я открыл отчет об ошибке в Mozilla. Если вы хотите отследить его: https://bugzilla.mozilla.org/show_bug.cgi?id=701648

Ответы

Ответ 2

Изменение размера похоже на изменение стиля. Как таковой, это можно наблюдать с помощью MutationObserver.

let observer = new MutationObserver(function(mutations) {
  console.log('mutations:', mutations);
});

let child = document.querySelector('textarea');
observer.observe(child, { attributes: true });
<textarea></textarea>

Ответ 3

Поскольку событие resize явно не работает (в настоящее время, по крайней мере), вы можете попробовать один из следующих альтернативных вариантов:

  • Используйте комбинацию mousedown, mousemove и/или mouseup, чтобы определить, был ли /t 24 изменен размер. Если вы хотите действительно мелкозернистый элемент управления, вы можете проверить в каждом событии mousemove, сколько/если размер div был изменен. Если вам это не нужно, вы можете просто не использовать mousemove вообще и просто измерить div в mousedown и mouseup и выяснить, было ли оно изменено в последнем.
  • Опрос каждые 200 мс (в зависимости от ваших потребностей) и сравнение текущего размера с последним известным размером. См. setTimeout().

Ответ 4

Вы можете использовать класс ResizeSensor css-element-query polyfill из

https://github.com/marcj/css-element-queries

Он позволяет вам вызывать функцию javascript при изменении размера для всех типов элементов, а не только для window. Он устанавливает реальный датчик, а не javascript setTimeout.

Используйте его следующим образом:

new ResizeSensor($('#myelement'), function() {
    console.log("myelement size has changed");
});

Поддерживаемые браузеры: все вкл. IE6 +.