解决浏览器滚动条导致的页面闪烁问题

说明

我网页初始加载时网页内容没有占满整个高度，后面随着我添加内容，当内容接近浏览器底部时，导致滚动条忽然出现，此时就出现了页面闪烁情况。

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)

解决浏览器滚动条导致的页面闪烁问题相关推荐

谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题
谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题(避雷) 浏览器的自动翻译会影响页面数据展示因为我呢用的谷歌浏览器,有时候需要查看英文文档,平时会开着自动翻译翻译,如图: 然后今天在写网页的时 ...
解决浏览器缩放导致页面显示不全问题
问题 pc端web页面开发时,发现windows系统经常推荐用户使用125%.150%比例的缩放窗口,这样导致web页面被进行缩放,除此之外还有人为的按钮缩放.故此,在页面devicePixelRat ...
谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题 - 接口返回数据被翻译
背景:Chrome浏览器自带谷歌翻译,这个翻译还是挺实用的,但如果前端代码设置不当,再加上用户操作失误就容易造成很多莫名其妙问题,下面详述问题现象.排查过程及解决方案文章目录一.问题现象二.排查 ...
解决浏览器放大缩小，页面随之改变大小问题
给外部选择器加个最小宽度,用在哪里都一样 min-width:1366px;
解决layui使用定时器对table数据重载导致页面闪烁的问题
最近使用layui做前端,使用了table,由于需要添加定时器刷新table,导致页面闪烁,令人生不如死.然后就拼命的百度找解决方法,终于找到了组织. LAYUI用TABLE.RENDER加载数据用 ...
解决html页面闪烁,解决前端页面闪烁问题（转载）
修改 Class 而不是 Style 我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定.很常见.开始的时候没问题,很快就可以搞定. nav { position: absolute; top: 6 ...
解决前端页面闪烁问题（转载）
修改 Class 而不是 Style 我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定.很常见.开始的时候没问题,很快就可以搞定. nav {position: absolute;top: 60p ...
angular 解决闪烁问题_AngularJS页面访问时出现页面闪烁问题的解决
我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. ...
h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...

解决浏览器滚动条导致的页面闪烁问题

解决浏览器滚动条导致的页面闪烁问题

css 解决方法

1 方式1

2 方式2 给html设置样式

解决浏览器滚动条导致的页面闪烁问题相关推荐

最新文章

热门文章