滚动条在网页上很常见，但没有得到足够的重视。 只有在滚动条问题需要处理兼容性时才执行调试操作。 本章提供css滚动条的一般内容。
一)条件
滚动条和overflow密切相关。 仅当父对象的溢出值为auto或scroll且元素的内容超出元素区域时，才会显示滚动条
2 :默认值
在任何浏览器中，默认滚动条都不是。 因为元素默认具有8px的margin。 如果滚动条来自元素，则滚动条和页面之间的间距必须为8px，实际上没有间距，因此滚动条来自元素3 :大小
下面的代码显示滚动条占浏览器可用宽度的是chrome/firefox/IE 17px
safari 21px.box{
width: 400px；
Overflow :滚动；
}
. in{
*陶醉铃： 1；
}
兼容性
【1】默认情况下，IE7-浏览器默认具有垂直滚动条，而其他浏览器没有//IE7-浏览器
html{overflow-y: scroll； }
//其他浏览器
html{overflow: auto； }
//取消页面的默认滚动条
html{overflow: hidden； }
【2】IE7-浏览器与其他浏览器的滚动条宽度设置机制不同. box{
width: 200px；
height: 100px；
背景色： pink；
Overflow :滚动；
}
. in{
width: 100%；
height: 60px；
背景色：灯光绿色；
}
垂直滚动条显示在测试文本的父框中，实际上，子in的可用宽度会缩小。 IE7-浏览器的子级宽度忽略此滚动条的宽度，在子级宽度=400*100%=400px处出现水平滚动条的其他浏览器的子级宽度考虑滚动条的宽度，子级宽度=(400-滚动条的宽度)
左边是IE7-浏览器，右边是其他浏览器
【3】水平定心问题
如果一个元素在页面中水平居中，则当页面显示垂直滚动条时，会出现水平居中的突出显示问题。 解决方法为以下：//IE8-默认值
html { overflow-y : scroll }/ie9，100 VW表示浏览器宽度，100%表示可用内容的宽度
. container {填充左： calc (100 VW-100 % )
定制
【1】IE
IE浏览器支持使用CSS样式更改滚动条零件的自定义颜色scrollbar-face-color滚动条突出部分的颜色
滚动栏阴影颜色
滚动条的空白部分的颜色
滚动条的明亮边缘颜色
滚动栏深阴影颜色
滚动条的背景色
滚动栏颜色上下按钮三角箭头颜色
滚动条的基本颜色
【2】微信
webkit内核浏览器支持滚动条定制样式，但与IE不同，webkit是通过组成整个：-webkit-scrollbar滚动条的伪类实现的
:-WebKit-scroll bar-thumb滚动滑块
: -维基百科- scroll bar-track外层轨道
: -维基百科- scroll bar-track-piece内层轨道
:-WebKit-scroll bar-corner角
:-WebKit-scroll bar-button两端按钮
如果在“注意事项”滚动条上将宽度和高度样式设置为百分比，则相对于窗口大小
[注意]滚动条的层叠关系为： scrollbar位于最底层，从上到下依次为track外层轨道、track-piece内层轨道。 button按钮、corner角点和thumb滑块具有顶级
四.假冒相关：horizontal
//horizontal伪类可以应用于任何水平滚动条
:垂直
//vertical伪类应用于垂直滚动条
3360危机
//decrement伪类应用于按钮和轨道片段。 表示降序按钮或轨道的片段。 例如，可以向上或向右移动区域的区域和按钮
3360英寸照相机
//increment伪类应用于按钮和轨道片段。 表示递增的按钮或轨道的片段。 例如，可以将区域向下或向左移动的区域和按钮
:启动
//start伪类应用于按钮和轨道的片段。 指示对象(按钮轨迹碎片)是否位于滑块前面
:结束
//end伪类应用于按钮和轨道片段。 指示对象(按钮轨迹碎片)是否位于滑块后面
:双精度蓝牙
//double-button伪类应用于按钮和轨道片段。 判断轨道结束的位置是否是一对按钮。 也就是说，轨道的碎片紧挨着一对按钮。
:单引擎
//single-button伪类应用于按钮和轨道片段。 判断轨道结束的位置是否是按钮。 也就是说，卡车的碎片紧挨着另一个按钮。
:no-button
no-button伪类表示轨道结束处没有按钮。
:corner-present
//corner-present伪类指示是否存在滚动条的角。
:窗口-不活动
//应用于所有滚动条，指示包含滚动条的区域，当焦点不在该窗口中时。
:3360-WebKit-scroll bar-track-piece :开始{
/*滚动条的上半部分或左半部分*
}
:-WebKit-scroll bar-thumb :窗口- inactive {
/*焦点不在当前区域滑块中的状态*
}
:-WebKit-scroll bar-button 3360 horizontal 3360 decrement : hover {
/*鼠标位于水平滚动条下方的按钮上的状态*
}