当前位置: 首页> 娱乐> 明星 > ResizeObserver和IntersectionObserver

ResizeObserver和IntersectionObserver

时间:2025/7/10 18:03:43来源:https://blog.csdn.net/m0_56885551/article/details/140092610 浏览次数:0次

ResizeObserver

ResizeObserver是监听DOM元素宽高的变化,需要注意的一点就是监听出变化结果是contentBox的宽度和高度

const resizeObserver = new ResizeObserver((entries) => {// dosomethingconsole.log('Size changed')
})
onMounted(() => {// 开始监听 当dom contentBox 尺寸发生变化时 触发上面的回调resizeObserver.observe(document.querySelector('.demo'))
})

用于监听元素大小的变化 

IntersectionObserver

IntersectionObserver 是监听DOM元素是否可见

const intersectionObserver = new IntersectionObserver((entries) => {// 如果 intersectionRatio 为 0,则目标在视野外,if (entries[0].intersectionRatio <= 0) return// dosomething})
onMounted(() => {// 开始监听 当dom的可见状态发生变化时,触发 上面的回调intersectionObserver.observe(...document.querySelector('.demo'))
})

用于图片懒加载

关键字:ResizeObserver和IntersectionObserver

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: