共计 894 个字符,预计需要花费 3 分钟才能阅读完成。
需要,监听一个 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…