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

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

说明

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

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)