总结: 若用到 margin:0 auto;
使页面居中,若部分页面出现滚动条,滚动条默认有 20px,这样会造成页面抖动;
解决办法:参考
1. html{overflow:scoll;}
让页面一直显示滚动条。
overflow 的几个属性值:
2. padding-left: calc(100vw - 100%);
自动计算滚动条的宽度,并让主体左边距离页面该(滚动条的)宽度。
比如:我想让画红框部分不受滚动条影响,那么此时我就给这一部分添加这条样式。还可以写成: margin-left: calc(100vw - 100%);
当浏览器宽度比较小的时候,左侧留的白明显与右边多,此时,做点响应式处理会更好一点:
@media screen and (min-width: 1150px) {
.wrap-outer {
margin-left: calc(100vw - 100%);
}
}
需要注意的是,此时主体不需要再写 calc(100vw - 100%)。
3. 其他
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
主要针对于 Google 浏览器
-
::-webkit-scrollbar 滚动条整体部分
-
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)
-
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
-
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。
-
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
-
::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方
-
::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
/* 滚动条的宽度 */
#app::-webkit-scrollbar{
width:4px;
}
/* 滚动的滑块 */
#app::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/* 外层轨道 */
#app::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
兼容 ie
#app{
scrollbar-face-color: #1f7ebe; /*滚动条凸出部分的颜色*/
scrollbar-highlight-color: #1f7ebe; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #1f7ebe; /*立体滚动条阴影的颜色*/
scrollbar-3dlight-color: #1f7ebe; /*滚动条亮边的([www.111cn.net](http://www.111cn.net/))颜色*/
scrollbar-arrow-color: #1f7ebe; /*上下按钮上三角箭头的颜色*/
scrollbar-track-color: #c1e2f1; /*滚动条的背景颜色*/
scrollbar-darkshadow-color: #1f7ebe; /*滚动条强阴影的颜色*/
scrollbar-base-color: #1f7ebe; /*滚动条的基本颜色*/
}