滚动条造成页面抖动问题

在这里插入图片描述

总结： 若用到 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;     /*滚动条的基本颜色*/
}