css改火狐滚动条样式_各浏览器中自定义滚动条的样式

webkit浏览器css设置滚动条：

::-webkit-scrollbar //滚动条整体部分，其中的属性有width,height,background,border(就和一个块级元素一样)等。(位置1)

::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。(位置2)

::-webkit-scrollbar-track // 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果(位置3)

::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分(位置4)

::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分(位置5)

::-webkit-scrollbar-corner //边角(位置6)

::-webkit-resizer //定义右下角拖动块的样式(位置7)

注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

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

DEMO