在HTML页面中，超出页面高度会自动在侧边显示滚动条。但是默认样式非常简单，看着也不美观；那么如何美化侧边滚动条呢？
可以通过 :-webkit-scrollbar 伪类元素实现美化滚动条，
CSS修改滚动条
/* 定义滚动条 */
body::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #f3f3f3;
}
/* 定义滚动条轨道 */
body::-webkit-scrollbar-track {
box-shadow: none;
border-radius: 10px;
background-color: #f3f3f3;
}
/* 定义滑块 */
body::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: none;
background-color: #66758c;
}
/* 定义滚动条 */
body::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #f3f3f3;
}
/* 定义滚动条轨道 */
body::-webkit-scrollbar-track {
box-shadow: none;
border-radius: 10px;
background-color: #f3f3f3;
}
/* 定义滑块 */
body::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: none;
background-color: #66758c;
}
将上面的代码加到<style> 或css文件中，保存之后刷新页面即可看到效果。
上述的代码是比较简单的美化了一下，各位同学可以根据自己站点的风格样式等去自定义修改。
如果在DIV标签中，比如做了超出滚动的样式，不想出现滚动条，可以直接给::-webkit-scrollbar添加
display: none进行隐藏即可。
