Mail.ruПочтаМой МирОдноклассникиИгрыЗнакомстваНовостиПоискСмотриComboВсе проекты

Javascript. Как узнать на сколько изменилась ширина окна браузера?

Гэбриэл Знаток (484), на голосовании 5 месяцев назад
Нужно узнать, при изменении курсором окна браузера, на сколько пикселов уменьшается или увеличивается окно. document.documentElement.clientWidth - дает непрерывное значение в каждый момент времени и разницу найти не удается. Важно не только значение, но и знак +/-. Т. е. изменил размер окна и в консоли пишет, например: - 356px, +608px. Я новичок в js поэтому не судите строго. Заранее благодарен!
Голосование за лучший ответ
Ярослав Оракул (87706) 5 месяцев назад
В обработчике события 'resize' вычисляешь разность текущей ширины, и предыдущей (которую инициализируешь перед добавлением обработчика), затем текущую запоминаешь как предыдущую.
Разумно будет применить к обработчику debounce паттерн, так как при ресайзе курсором, событие возникает очень часто. К тому же, это требуется по задаче (для определения момента когда ресайз завершен).
То есть, обработчик в общем виде будет иметь примерно такой вид:
window.addEventListener('resize', debounce(function () {
 const currW = document.documentElement.clientWidth;
 doSomethingWith(currW - prevW);  // либо в переменную, если внешний код отслеживает
 prevW = currW;  // prevW объявлена в LE обработчика
}, debounceInterval));
Похожие вопросы
Также спрашивают