04/9
2016
如果你使用chrome访问本网站，你应该能看到本站的滚动条样式是自定义的。那我们要如何做呢？
其实chrome内置了一些伪类，使用它们可以控制滚动条的外观。例如：（less 语法）
.beautify_scrollbar {
// 滚动条整体
// width 是垂直滚动条的宽度，height 是水平滚动条的高度
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
// 整个滚动条的底色
//&::-webkit-scrollbar-track {background:#fcfcfc;}
// 滚动条的滑块部分
&::-webkit-scrollbar-thumb {
background-color: #3AB8F2;
border-radius: 10px;
}
// 垂直滚动条的滑块部分
// &::-webkit-scrollbar-thumb:vertical {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
// 水平滚动条的滑块部分
// &::-webkit-scrollbar-thumb:horizontal {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
}
如果你要对特定元素设置滚动条，而不是对整个页面设置，那么需要在伪类前面加上这个元素的选择器。
一个例子：
