CSS3对于滚动条也做了特别支持,可惜目前只有webkit内核的支持比较好,IE支持不完全,详细兼容性请查看http://caniuse.com/#search=scrollbar。
主要有7个属性:
- ::-webkit-scrollbar? 滚动条整体部分,可以设置宽度啥的
- ::-webkit-scrollbar-button? 滚动条两端的按钮
- ::-webkit-scrollbar-track? ?外层轨道
- ::-webkit-scrollbar-track-piece? ?内层滚动槽
- ::-webkit-scrollbar-thumb? 滚动的滑块
- ::-webkit-scrollbar-corner? 边角
- ::-webkit-resizer? 定义右下角拖动块的样式
具体所指如图示:
示例:
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } /*定义滚动条的轨道,内阴影及圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3); border-radius: 10px; background-color: #f5f5f5; } /*定义滑块,内阴影及圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(45, 62, 80, .3); background: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#2D3E50), to(#2D3E50), color-stop(.6, #129FEA));; } /*滑块鼠标悬停样式*/ ::-webkit-scrollbar-thumb:hover { background: #129FEA; }
[/给力]
[/给力]
pinglun
[/强]