一、滚动条样式
1. ie8浏览器
| 名称 | 描述 |
|---|---|
| scrollbar-arrow-color | 三角箭头的颜色 |
| scrollbar-face-color | 立体滚动条的颜色（包括箭头部分的背景色） |
| scrollbar-3dlight-color | 立体滚动条亮边的颜色 |
| scrollbar-highlight-color | 滚动条的高亮颜色（左阴影？） |
| scrollbar-shadow-color | 立体滚动条阴影的颜色 |
| scrollbar-darkshadow-color | 立体滚动条外阴影的颜色 |
| scrollbar-track-color | 立体滚动条背景颜色 |
| scrollbar-base-color | 滚动条的基色 |
出现滚动条的元素{/*三角箭头的颜色*/scrollbar-arrow-color: #fff;/*滚动条滑块按钮的颜色*/scrollbar-face-color: #0099dd;/*滚动条整体颜色*/scrollbar-highlight-color: #0099dd;/*滚动条阴影*/scrollbar-shadow-color: #0099dd;/*滚动条轨道颜色*/scrollbar-track-color: #0066ff;/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/scrollbar-3dlight-color:#0099dd;/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/scrollbar-darkshadow-color: #0099dd;/*滚动条基准颜色*/scrollbar-base-color: #0099dd;}
2. 其他浏览器（参考-风铭大师）
| 名称 | 描述 |
|---|---|
| ::-webkit-scrollbar | 滚动条整体部分，其中的属性: width,height,background,border等。 |
| ::-webkit-scrollbar-button | 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 |
| ::-webkit-scrollbar-track | 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 |
| ::-webkit-scrollbar-track-piece | 内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。 |
| ::-webkit-scrollbar-thumb | 滚动条里面可以拖动的那部分。 |
| ::-webkit-scrollbar-corner | 边角，两个滚动条交汇处。 |
| ::-webkit-resizer | 两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上） |
::-webkit-scrollbar {width: 6px; /*纵向滚动条的宽度*/height: 6px; /*横向滚动条的高度*/background-color: #181c32;
}::-webkit-scrollbar-thumb {background-color: #5a76cd;
}
二、滚动条造成页面抖动
1. 造成页面抖动的原因：
当布局用到margin:0 auto;左右水平居中时，且有的页面有滚动条，有的页面没有，这样会造成抖动。
div{width:1200px;margin:0 auto;
}
<body><div></div>
</body>
2. 解决办法（参考1-zh_rey、 参考2-OZCNO、推荐参考3-张鑫旭 ）：
（1）一直存在滚动槽：overflow-y:scroll;
（2）让页面右边偏移滚动条的宽度那么长： margin-left: calc(100vw - 100%); 或 padding-left: calc(100vw - 100%);
- 1、加在居中定宽主体的父级身上。
- 2、
calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；- - 3、
100vw相对于浏览器的 window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。 于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！
注意：ie 浏览器有个 offset 偏移量，比较推荐使用 padding-left（能解决部分问题）。
设置 padding-left ，有时候拉动横向滚条条时，页面的偏移量（这个时候是padding）还是不正确，这时需要做响应式。
@media screen and (min-width: 1240px) {定宽主体 {padding-left: calc(100vw - 100%);}
}
此时，原来定宽主体就不用再写 padding-left: calc(100vw - 100%);，只需要写上面这段响应式就可以了。
（3）兼容写法：
html {overflow-x: hidden;overflow-y: auto;
}
body {width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%);
}
也可以看我之前写的，不过相差不是很大：滚动条造成页面抖动问题
三、滚动条部分留白问题
造成滚动条留白的原因是宽度设置了100%，哪里留白就把那的 width:100% 改为：min-width:100%就好了。
四、让背景图不跟随滚动条滚动
解决办法（参考-站住，别跑）：
（1）css：
在设置背景图的元素中设置一条属性： background-attachment:fixed;，兼容IE6；
（2）js：
<script type="text/javascript">var scrollBackground = true;
</script>
具体效果就看原文吧！
