各浏览器中自定义滚动条的样式

webkit浏览器css设置滚动条：

1 2 3 4 5 6 7

::-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中的选择器。而{}中的属性，你就像控制一般块级元素一样简单（强大啊）。

CSS

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

#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 ; }

HTML

01 02 03 04 05 06 07 08 09 10 11 12

< div id = "scroll-1" > < div > Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)   Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)   Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)   Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)   Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)Web前端开发-Web前端工程师--Web前端学习之路(http://www.w3cways.com)</ div > </ div >

IE浏览器css设置滚动条（看下表）：

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

FIREFOX浏览器css设置滚动条（参照如下连接）：

http://bbs.kafan.cn/thread-1529981-1-1.html

AD：【chrome二维码插件】 w3cways QR Code Generator

转载请注明来源： Web前端(W3Cways.com) - Web前端学习之路 »  各浏览器中自定义滚动条的样式

转载于:https://www.cnblogs.com/kukudelaomao/p/7462112.html