滚动条造成页面抖动问题

总结： 若用到 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 浏览器

1. ::-webkit-scrollbar 滚动条整体部分
2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
7. ::-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;     /*滚动条的基本颜色*/
}