欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

去除 position:fixed 抖动的方法

发布时间:2023/12/15 编程问答 51 豆豆
生活随笔 收集整理的这篇文章主要介绍了 去除 position:fixed 抖动的方法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

在做项目的时候发现header莫名抖动,刚开始打开网页没什么问题,多滑动几次触发几次网页中的交互就发现header在蜜汁抖动,寻找一个下午终于发现position:fixed 这个元凶,累到吐血,刚开始我还以为是动画效果或者过度效果对header有影响,万万没想到是这东西。


经过查阅资料,总结出以下几种方法解决:

一.给fiexd加上如下CSS样式:

-webkit-transform: translateZ(0);

二.设置body CSS

body {height:100%;overflow:auto;margin: 0;}

这种方式可能会影响到页面的整体效果,不建议使用

三.在fiexd内设置position:absolute,如下:

<div style="position:fiexd;bottom:0px;"><div style="position:absolute;">----</div></div>

第一种最为简单快捷,其余几种没有一一验证。

创作挑战赛新人创作奖励来咯,坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的去除 position:fixed 抖动的方法的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。