当前位置:网站首页>解决浏览器滚动条导致的页面闪烁问题
解决浏览器滚动条导致的页面闪烁问题
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)
边栏推荐
猜你喜欢

y83. Chapter 4 Prometheus Factory Monitoring System and Actual Combat -- Advanced Prometheus Alarm Mechanism (14)

PAT serie b write the number 1002

Optional parameters typescript19 - object
![[target detection] YOLOv7 theoretical introduction + practical test](/img/ff/a83acbf9dd5cc2f907f3538d287842.png)
[target detection] YOLOv7 theoretical introduction + practical test

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

2022.7.26 模拟赛

Typescript22 - interface inheritance

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

Robot_Framework:常用内置关键字

MySQL-数据操作-分组查询-连接查询-子查询-分页查询-联合查询
随机推荐
Selenium: upload and download files
剑指 Offer 68 - I. 二叉搜索树的最近公共祖先
(2022牛客多校四)N-Particle Arts(思维)
pytorch、tensorflow对比学习—张量
用位运算为你的程序加速
pytroch、tensorflow对比学习—功能组件(数据管道、回调函数、特征列处理)
The sword refers to Offer 68 - I. Nearest Common Ancestor of Binary Search Trees
报错:AttributeError: module ‘matplotlib’ has no attribute ‘figure’
微信小程序获取手机号phonenumber.getPhoneNumber接口开发
Typescript20 - interface
小心你的字典和样板代码
typescript26 - literal types
可视化全链路日志追踪
PAT乙级 1001 害死人不偿命的(3n+1)猜想
微信小程序用户登录auth.code2Session接口开发
Selenium:操作JS
Optional parameters typescript19 - object
Selenium:下拉框操作
CSP-S2019 Day1
API Design Notes: The pimpl trick