吱托邦

吱托邦

面包会有的,牛奶也会有的,一切都会有的

0%

前端ResizeObserver监听没有触发的原因

最近在一个前端项目中,需要实现div元素的高度随着其内部组件数量的变化,而增加高度的情况。具体来说就是,比如现在初始化状态下div的宽度为100%,高度为1000px,如果div里面的组件在增加,并且增加超过了1000px的高度,那么就将div高度修改为2000px,如果div内部组件在减少,并且小于了1000px,那么就将div高度从2000px减少为1000px。

根据这种需求,我们第一反应会想到使用原生的ResizeObserver,然而当我在使用ResizeObserver监听外层div高度变化的时候,出现了意想不到的情况,简单来说就是可以监听到div内部组件的增加而超过1000px的情况,此时div就变成了2000px;然而我将增加的组件删除后,div没有从2000px变回1000px。根据测试发现,组件在减少时,压根没有触发ResizeObserver。

经过研究,发现原因在于ResizeObserver监听的元素不能设置height或者min-height为固定的px,因为给height设置了固定的px之后,当内部组件减少时,div实际上高度是没有跟随着减小的,因此也就无法触发ResizeObserver了。

那么我们为了实现项目中div高度成倍增加或者减少的需求,只能在div内部套一个height属性为fit-content的div,然后通过ResizeObserver监听这个内部div的高度变化,然后再根据这个内部div的高度变化,来修改外部div的height属性成倍的增加或减少即可。

*该文章原创并发表于吱托邦网站,未经允许禁止转载!

文章标题:前端ResizeObserver监听没有触发的原因
本文链接:https://www.lovebykin.com/1691503838/
版权声明:若无特殊标注,文章皆吱托邦原创,转载请注明出处。
赞赏文章:如果该文章有帮助,可以扫微信赞赏码对吱托邦进行鼓励。