当前位置: 首页 > Web前端 > JavaScript

[JS]ResizeObserver监听div元素高度变化

时间:2023-03-27 01:17:35 JavaScript

需求,监听一个div元素的高度变化。这个div是内容区的容器,内容区元素的高度会随着内容的多寡而变化。也就是说div随着内容的自适应高度而变化,需要监听自适应高度的变化。第一反应是用resize事件,比如window可以window.addEventListener("resize",handleResize),但是普通的dom元素是没有onresize事件的。去google了一下,发现还有人说要用MutationObserver。我尝试了MutationObserver,发现MutationObserver无法监控dom自适应变化。MutationObserver不适合这种场景。注意:MutationObserver用于监听DOM树结构的变化,比如DOM节点的增删改查,DOM节点某个属性的变化等。最后使用ResizeObserver监听的resize事件分区元素。UsagefunctionhandleResize(){...}//resize后的处理逻辑consttheResizeObserver=newResizeObserver(handleResize);//创建一个观察者实例consttheElement=document.getElementById("content");theResizeObserver.observe(theElement);代码示例见https://github.com/DiracKeeko...注意:页面销毁时(准确的说是销毁前),需要取消观察,释放resi??zeObservertheResizeObserver.unobserve(theElement);theResizeObserver=null;JS在编写原生HTML时,考虑使用window.onbeforeunloadvue在beforeDestory生命周期进行操作。另外,ResizeObserver的监听是一个高频事件。建议在handleResize中加入防抖。同步更新你的语雀https://www.yuque.com/diracke后...