700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue图片动画上下跳动_移动端position:fixed滚动页面会产生抖动的有效解决办法

vue图片动画上下跳动_移动端position:fixed滚动页面会产生抖动的有效解决办法

时间:2024-07-05 00:44:12

相关推荐

vue图片动画上下跳动_移动端position:fixed滚动页面会产生抖动的有效解决办法

前言

这个问题其实是老问题了,在没有硬件加速的浏览器APP中都能见到这个问题,比如安卓机自带的浏览器等等,不过,所有机型的微信浏览器都没有这个问题。这个bug具体说,就是fixed元素在最前端,并且overflow:hidden,当滚动这个元素的时候,我们期望的是它纹丝不动,然而,这个元素会抖动。

如果你希望能在任何移动浏览器正常显示,那么本文对你有用。

网上的解决办法

搜索“fixed + 抖动”会出现很多方案,我不在这列举。然而,在我的手机上测试都无法正常修复bug,不过其中最接近的方案是,给元素绑定一个touchmove事件,然后阻止这个事件的默认操作。虽然满足了我的要求,但是,布局问题让js参与终究不是好办法,通过摸索,我还是实验出了一个可行办法。

修复方案

一、给body元素准备一个类:

body.position-fixed {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

overflow: hidden;

}

其实,不给body设类,而是给跟body元素同样覆盖面积的一个祖先元素设fixed,也可以实现同样效果。如果这个祖先元素的文档流位置并不是跟body重合,那就不行了。所以请找跟body元素位置重叠的祖先元素。

二、给元素也指定fixed类,具体就不写了,因为不用额外加任何代码。这样就行了。

这种方法的背后原理,我其实不太清楚,但问题总算解决了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。