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

56次阅读

共计 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…

正文完
 0