我们都知道浏览器自带的滚动条样式实在是太丑了，我们必须美化它。
css代码如下：
- 基于webkit内核的浏览器
//定义滚动区域的样式，设置高度无意义。
::-webkit-scrollbar {
width: 8px;
}
// 定义滑块的样式
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #9598a7;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb:hover {
background: #818491;
}
// 定义滚动条轨道的样式
::-webkit-scrollbar-track {
border-radius: 10px;
background: #e3e3e3;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
- 基于IE浏览器
html {
scrollbar-face-color:#9598a7; //滑块颜色
scrollbar-Shadow-color:#9598a7; //滑块边框颜色
scrollbar-arrow-color:rgba(134, 130, 130, 0.4); //滚动区域箭头颜色
scrollbar-track-color:#e3e3e3; //滚动轨道颜色
}
总结：没有火狐浏览器的代码，IE浏览器对于滚动条的设置太局限，只能设置颜色，设置完成之后还是很丑。而基于webkit内核的浏览器就比较友好了，我们可以设置自己想要的样式，包括圆角，阴影等。
