在vant中position:fixed定位失效的问题

687 阅读1分钟

在项目中使用了vant进行开发,在van-popup弹出窗体组件中对元素使用了fixed属性进行定位。使用时发现fixed的效果和预计结果不一样,无法吸顶和吸底。

因为页面是可以滚动的,按道理说,应该是可以吸在底部的。

image.png

通过排查发现,van-popup组件中使用了transfrom

image.png

(图中是后来被我修改的,所以被删掉了)

其实主要原因就是van-popup中使用了transfrom属性,这导致fixed的判断发生了变化,从整个可滚动窗口变成了一个屏幕的高度。

解决方案:覆盖掉组件的这部分样式,试了下对页面也没有产生明显的影响,但是要注意,如果多处使用到了这个组件,单独价加个类名,对属性进行修改,以防止污染正常的部分

image.png