浏览器滚动条样式的设置

我们都知道浏览器自带的滚动条样式实在是太丑了，我们必须美化它。
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内核的浏览器就比较友好了，我们可以设置自己想要的样式，包括圆角，阴影等。