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
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)
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; }
HTML
<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 | 设置滚动条轨迹组成部分的颜色 |