当前位置:网站首页>解决浏览器滚动条导致的页面闪烁问题
解决浏览器滚动条导致的页面闪烁问题
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)
边栏推荐
- 挑战52天背完小猪佩奇(第01天)
- Logitech Mouse Experience Record
- y83.第四章 Prometheus大厂监控体系及实战 -- prometheus告警机制进阶(十四)
- Selenium:操作Cookie
- Selenium: form switching
- II. Binary tree to Offer 68 - recent common ancestor
- Dry goods!How to Construct SRv6-TE Performance Test Environment Using Instrumentation
- 2022.7.27好题选讲
- vim configuration + ctag is as easy to read code as source insight
- Robot_Framework:常用内置关键字
猜你喜欢

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

(Codeforce 757)E. Bash Plays with Functions(积性函数)

(2022牛客多校四)D-Jobs (Easy Version)(三维前缀或)

(2022 Nioke Duo School IV) D-Jobs (Easy Version) (3D prefix or)

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

MySQL-数据定义语言-DDLdatebase define language

冲刺金九银十,Android开发面试(内含面试资料|面试题|源码)

pytorch、tensorflow对比学习—计算图和微分机制

(2022牛客多校四)A-Task Computing (排序+动态规划)

(2022牛客多校四)H-Wall Builder II(思维)
随机推荐
ModuleNotFoundError: No module named ‘tensorflow.keras‘报错信息的解决方法
Asynchronous reading and writing of files
(2022 Niu Ke Duo School IV) N-Particle Arts (Thinking)
力扣(LeetCode)212. 单词搜索 II(2022.07.31)
文件的异步读写
可视化全链路日志追踪
请求/响应拦截器写法
WPF项目-初步了解数据绑定 binding
Selenium:上传、下载文件
Selenium:元素等待
MySQL-DML语言-数据库操作语言-insert-update-delete-truncate
Selenium: Manipulating Cookies
API Design Notes: The pimpl trick
将CSV文件快速导入MySQL中
(2022牛客多校四)N-Particle Arts(思维)
Selenium: element positioning
MySQL-Data Definition Language-DDLdatebase define language
USB3.0:VL817Q7-C0的LAYOUT指南(二)
备战金九银十,如何顺利通过互联网大厂Android的笔面试?
Typescript22 - interface inheritance