关于javascript:JS-ResizeObserver监听div元素高度变化

需要，监听一个div元素的高度变动，这个div是内容区的container，内容区元素的高度会随着内容的多与少发生变化。也就是说，div随着内容的多少自适应高度变动，要监听这个自适应高度的变动。

第一反馈，用resize事件
比方对window，能够window.addEventListener("resize", handleResize)
然而一般的dom元素没有onresize事件。

去google，发现有说用MutationObserver的，尝试了一下MutationObserver，发现MutationObserver不能监听dom自适应变动，MutationObserver不适用于这个场景。

注：
MutationObserver用于监听DOM树结构变动，如DOM节点的增删改，DOM节点某个属性的变动等。

最初应用ResizeObserver来监听div元素的resize事件。

用法
function handleResize() { ... } // resize后的解决逻辑
const theResizeObserver = new ResizeObserver( handleResize ); // 创立一个observer实例
const theElement = document.getElementById("content");
theResizeObserver.observe(theElement );

代码示例见
https://github.com/DiracKeeko...

留神：
页面销毁时（精确的说是销毁前），须要勾销察看，并把resizeObserver开释
theResizeObserver.unobserve(theElement);
theResizeObserver = null;
JS写原生html思考用window.onbeforeunload
vue在beforeDestory生命周期中操作
另外theResizeObserver的监听是一个高频产生的事件，倡议给handleResize加上防抖。

完结

同步更新到本人的语雀
https://www.yuque.com/diracke...