纯css 解决页面出现滚动条时候页面闪动一下

原创 旺爷 随笔 前端 浏览器相关问题 264阅读 2018-01-26 09:35:26 举报

在滚动条出现的时候 页面会被向左边挤,闪动一下,当滚动条消失的时候页面又会向右动动一下。

纯css解决办法如下:
用css中的计算calc属性,给页面设置padding-left;
利用“vw”这个单位,vw 指的是浏览器的宽度 , 100vw 就是整个浏览器的宽度

.autoScorll{
padding-left: calc(100vw - 100%);
}

这样就可以解决问题了,其实原理很简单 就是动态的设置padding-left值

100vw 指的是整个屏幕的宽度,而100%指的是可视区域,利用整个屏幕的宽度减去可是区域的,得到的就是滚动条的宽度。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复