更改浏览器滚动条样式以前没怎么接触过。上网查找了一些资料。整理mark如下:
首先是基于webkit内核浏览器的几个解析:

-webkit-scrollbar //图1,滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
-webkit-scrollbar-button //图2,滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
-webkit-scrollbar-track //图3,外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
-webkit-scrollbar-track-piece //图4,内层轨道,滚动条中间部分(除去)。
-webkit-scrollbar-thumb //图5,滚动条里面可以拖动的那部分
-webkit-scrollbar-corner //图6,边角
-webkit-resizer //图7,定义右下角拖动块的样式
在应用中,给body或相关ID附加以上即可。
如:
<style>
body::-webkit-scrollbar {
width:6px;
height:10px;
}
body::-webkit-scrollbar-button {
display:none
}
body::-webkit-scrollbar-track {
background:#fff;
}
body::-webkit-scrollbar-track-piece {
}
body::-webkit-scrollbar-thumb{
background:#57bae8;
border-radius:3px;
}
body::-webkit-scrollbar-thumb:hover{
background:red;
}
body::-webkit-scrollbar-corner {
background:#fff;
}
body::-webkit-scrollbar-resizer {
background:#fff;
}
</style>
<body>
<div style="margin-top:1024px;">
<p>这是一段演示代码,webkit内核浏览器的滚动条美化。</p>
</div>
</body>
最终效果为: