当前位置:网站首页>解决浏览器滚动条导致的页面闪烁问题
解决浏览器滚动条导致的页面闪烁问题
2022-08-01 05:18:00 【集电极】
解决浏览器滚动条导致的页面闪烁问题
说明
我网页初始加载时网页内容没有占满整个高度,后面随着我添加内容,当内容接近浏览器底部时,导致滚动条忽然出现,此时就出现了页面闪烁情况。
css 解决方法
1 方式1
/*方式1 推荐*/
.wrap-outer{
margin-left: calc(100vw - 100%);
}
首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个。
如果是全局滚动条导致的闪烁,也可以尝试设为body标签,不过要自行测试一下。
如我的body{ margin-left: calc(100vw - 100%); }
2 方式2 给html设置样式
html{
margin-right: calc(100% - 100vw);
overflow-x: hidden;
}
方式2 经过我的测试,浏览器不会出现闪烁了,但会导致我下面的滚动条
不会出现。
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
边栏推荐
猜你喜欢

pytroch、tensorflow对比学习—搭建模型范式(低阶、中阶、高阶API示例)

零序电流继电器器JL-8C-12-2-2

The solution to the inconsistency between the PaddleX deployment inference model and the GUI interface test results

Robot_Framework: Assertion

(2022 Niu Ke Duo School IV) K-NIO's Sword (Thinking)

USB3.0:VL817Q7-C0的LAYOUT指南(二)

状态压缩dp

state compressed dp

Code Interview Guide for Programmers CD15 Generating an Array of Windowed Maximums

Lawyer Interpretation | Guns or Roses?Talking about Metaverse Interoperability from the Battle of Big Manufacturers
随机推荐
Selenium: JS operation
Check控件
Power button (LeetCode) 212. The word search II (2022.07.31)
(2022牛客多校四)A-Task Computing (排序+动态规划)
Lawyer Interpretation | Guns or Roses?Talking about Metaverse Interoperability from the Battle of Big Manufacturers
Selenium:上传、下载文件
Selenium:表单切换
Robot_Framework: keyword
可视化全链路日志追踪
对话MySQL之父:一个优秀程序员可抵5个普通程序员
pytorch、tensorflow对比学习—计算图和微分机制
用位运算为你的程序加速
LeetCode 387. 字符串中的第一个唯一字符
2022/07/29 入职健海JustFE团队,我学到了高效开发(年中总结)
A,H,K,N
(2022 Niu Ke Duo School IV) N-Particle Arts (Thinking)
(Codeforce 757) E. Bash Plays with Functions
Robot_Framework:常用内置关键字
万字逐行解析与实现Transformer,并进行德译英实战(一)
pytorch、tensorflow对比学习—张量