[CSS]滚动条

滚动条显示规则

overFlow-x: scroll ;overFlow-y: hidden ;

可用属性:
visible：（默认）对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

参考:
http://www.css88.com/book/css/properties/layout/overflow-x.htm

---

谷歌下自定义滚动条
参考: http://www.w3cways.com/1670.html

//滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。（位置1）::-webkit-scrollbar //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。（位置2）::-webkit-scrollbar-button // 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）::-webkit-scrollbar-track  //内层轨道，滚动条中间部分（位置4）::-webkit-scrollbar-track-piece  //滚动条里面可以拖动的那部分（位置5）::-webkit-scrollbar-thumb //边角（位置6）::-webkit-scrollbar-corner //定义右下角拖动块的样式（位置7）::-webkit-resizer 

注意：

对以上各个部分定义width,height时。
有如下功能：

若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；
若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

在Chrome中，滚动条中的各个部分和DOM中块级元素是一样的。
通过::-webkit-scrollbar等就类似于原来所说的CSS中的选择器。
而{}中的属性，你就像控制一般块级元素一样简单（强大啊）。

html

<div id="scroll-1">    <div>        CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条        CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条        CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条        CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条        CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条CSS谷歌自定义滚动条    </div></div>

css:

#scroll-1 {width:200px;height:200px;overflow:auto;}#scroll-1 div {width:400px;height:400px;}    #scroll-1::-webkit-scrollbar {width:10px;height:10px;}#scroll-1::-webkit-scrollbar-button    {background-color:#FF7677;}#scroll-1::-webkit-scrollbar-track     {background:#FF66D5;}#scroll-1::-webkit-scrollbar-track-piece {background:#ff0000;}#scroll-1::-webkit-scrollbar-thumb{background:#FFA711;border-radius:4px;}#scroll-1::-webkit-scrollbar-corner {background:#82AFFF;}#scroll-1::-webkit-scrollbar-resizer  {background:#FF0BEE;}

---

IE下自动与滚动条

滚动条样式支持情况支持浏览器版本可否继承描述scrollbar-3dlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色scrollbar-highlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色scrollbar-face-colorIE特有属性IE5.5+y设置滚动框和滚动条箭头的颜色scrollbar-arrow-colorIE特有属性IE5.5+y设置滚动条箭头的颜色scrollbar-shadow-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头右下边缘的颜色scrollbar-dark-shadow-colorIE特有属性IE5.5+y设置滚动条槽的颜色scrollbar-base-colorIE特有属性IE5.5+y设置滚动条主要构成部分的颜色scrollbar-track-colorIE特有属性IE5.5+y设置滚动条轨迹组成部分的颜色

scrollBar-face-color: green;scrollBar-hightLight-color: red;scrollBar-3dLight-color: orange;scrollBar-darkshadow-color:blue;scrollBar-shadow-color:yellow;scrollBar-arrow-color:purple;scrollBar-track-color:black;scrollBar-base-color:pink;