js监听元素尺寸变化

上代码：

/*** @description 监听元素尺寸变化* @author: hruomei* @update* @date: 2021-07-22 11:29:40*/export default class ResizeObserver {constructor() {}static handleResize(e) {const trigger = e.target.__resizeTrigger__;if (!trigger) return;const handlers = trigger.__z_resizeListeners;if (handlers) {handlers.forEach(({ handler, context }) => {handler.apply(context, [e]);});}}static removeHandler(ele, handler, context) {const handlers = ele.__z_resizeListeners;if (!handlers) return;ele.__z_resizeListeners = handlers.filter(h => !(h.handler === handler && h.context === context));}static createResizeTrigger(ele) {let obj = document.createElement('object');obj.setAttribute('style','display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');obj.onload = ResizeObserver.handleObjectLoad;obj.type = 'text/html';ele.appendChild(obj);obj.data = 'about:blank';return obj;}static handleObjectLoad() {this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;this.contentDocument.defaultView.addEventListener('resize', ResizeObserver.handleResize);}on(ele, handler, context) {if (!ele) throw new Error('illegal element')let handlers = ele.__z_resizeListeners;if (!handlers) {handlers = [];ele.__z_resizeListeners = handlers;if (window.getComputedStyle(ele, null).position === 'static') {ele.style.position = 'relative';}let obj = ResizeObserver.createResizeTrigger(ele);ele.__resizeTrigger__ = obj;obj.__resizeElement__ = ele;}handlers.push({handler,context});}off(ele, handler, context) {if (!ele) throw new Error('illegal element')let handlers = ele.__z_resizeListeners;if (!handlers) return;ResizeObserver.removeHandler(ele, handler, context);if (!handlers.length) {let trigger = ele.__resizeTrigger__;if (trigger) {trigger.contentDocument.defaultView.removeEventListener('resize', ResizeObserver.handleResize);ele.removeChild(trigger);delete ele.__resizeTrigger__;}delete ele.__z_resizeListeners;}}
}

用法：

const resizeObserver = new ResizeObserver();
const element = document.getElementById('netcallLeftWrapper');
const callback = () => {console.log('leftWrapper尺寸变化')
});// 监听resize事件
resizeObserver.on(element, callback, this);// 取消监听resize事件
resizeObserver.off(element, callback, this);

js监听元素尺寸变化相关推荐

js如何监听元素事件是否被移除_JavaScript 监听元素是否进入/移出可视区域
JavaScript 监听元素是否进入/移出可视区域常规操作防抖节流 IntersectionObserver 兼容的代码常规操作通常的做法是,监听srcoll事件,根据元素的offset来判 ...
js监听页面或元素scroll事件，滚动到底部或顶部
基本原理: 1.滚动到底部元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...
JS监听页面元素删除子节点、增加子节点、修改子节点的内容
监听这个事件DOMSubtreeModified. 表示如果当前监听元素的子节点有改动:包括删除子节点.增加子节点.修改子节点的内容,都会触发这个事件. var container = documen ...
js IntersectionObserver监听元素的显示与隐藏，图片懒加载
IntersectionObserver监听显隐,监听元素在可视窗口中展示的比例,1:完全展示出来了,0:完全遮挡了,opacity和visibility控制的显隐是不会触发的.该api常用于图片懒加 ...
vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度发布时间:2020-07-30 09:09:43 来源:亿速云阅读:150 作者:小猪这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件业务需要记录一下 $(function () {var div=docum ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
html js按钮事件监听,JS监听事件
对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...

js监听元素尺寸变化

js监听元素尺寸变化相关推荐

最新文章

热门文章