使用ResizeObserver对单个元素进行大小监听

使用ResizeObserver对单个元素进行大小监听

一、API介绍ResizeObserver这是一个能针对某个元素实行大小、位置变化监听的API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用，目前chrome、safari、fireFox(pc)基本支持。二、常规用法

const resizeOb= new ResizeObserver(entries => { for(const entry of entries) { console.log(entry) }})resizeOb.observe(document.getElementById("test"))//打印结果//{target: div#test, contentRect: DOMRectReadOnly}

useEffect(() => { const resizeObserver = new ResizeObserver((entries) => {console.log(entries)}); resizeObserver.observe(document.getElementById("test")) return (): void => { resizeObserver.unobserve(document.getElementById("test")) }; }, []);

interface DOMRectReadOnly { bottom:number; height:number; left:number; right:number; top:number; width:number; x:number; y:number;}//-回调函数中的参数类型，自带元素本身(target)与对应的只读位置、大小信息(contentRect)interface ResizeObserverEntry { target: HTMLElement | null; contentRect: ResizeObserverEntry["target"] extends null? null : DOMRectReadOnly}// -构造函数所需要传入的回调函数type EntriesFuntion = (entries:Array)=>void;/**• 元素大小、位置变化-*/declare class ResizeObserver { /**• 元素大小、位置变化-• @param entriesFn 关于挂载到-的回调函数• @returns {Observer} 返回一个-对象*/ constructor(entriesFn:EntriesFuntion): ResizeObserver{}; /**• 执行目标元素的监听• @param target 要执行监听的目标元素• @param options 设置元素的盒子模型，默认为content-box• @returns {void}*/ observe(target:HTMLElement|null,options?:{box:'border-box'|"content-box"}):void; /**• 取消目标元素的监听• @param target 要取消执行监听的目标元素• @returns {void}*/ unobserve(target:HTMLElement|null):void /**• 取消所有元素监听*/ disconnect():void}

四、结语ResizeObserver是在resize的过程中调用的，resize本身属于频繁触发的事件，在期间穿插太多逻辑其实对性能影响较大，如果只是想对某个元素变动后执行某个回调的话，建议最好搭配函数节流进行使用。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。