对于自定义滚动条样式，最好的方法是用
::-webkit-scrollbar css属性（Safari目前只能用这个属性），标准的方法是用 scrollbar-width和scorllbar-color 属性来自定义滚动条样式。
使用::-webkit-scrollbar属性自定义滚动条样式的模板大概是这样的：
.styled-scrollbars::-webkit-scrollbar {
width: 10px; /* 垂直于滚动条的宽度 */
height: 10px; /* 和滚动条平行的宽度 */
}
/* 前面的颜色 */
.styled-scrollbars::-webkit-scrollbar-thumb {
background:#999;
}
/* 后面的颜色 */
.styled-scrollbars::-webkkit-scrollbar-track {
background:#333;
}
事实上我没发现和滚动条平行的宽度可以更改（雾）
使用标准方法自定义滚动条的模板大概是这样的：
.styled-scrollbars {
/* Foreground, Background */
scrollbar-color:#999 #333;
scrollbar-width:thin;
}
很明显的缺点是不可以自定义滚动条的宽度和背景颜色等。
使用::-webkit-scrollbar 属性在chrome 和safari 上解锁更有趣的滚动条
用于在 CSS 中设计滚动条样式的非标准::-webkit属性比标准化属性具有更多的设计可能性。例如，我可以让一个垂直滚动条的宽度变得非常宽，让背景轨迹有插入阴影，让前景有一个渐变:
