【效果备忘】修改网页的滚动条样式

滚动条样式的修改是通过伪元素实现的：

　　-webkit-scrollbar ​滚动条整体部分
​　　-webkit-scrollbar-button​ 滚动条两端的按钮
　　​-webkit-scrollbar-track ​外层轨道
　　​-webkit-scrollbar-track-piece​ 内层轨道，滚动条中间部分（除去）
　　​-webkit-scrollbar-thumb​ 内嵌滑块
　　​-webkit-scrollbar-corner​ 边角
　　​-webkit-resizer ​定义右下角拖动块的样式

---

在CSS代码中：
有滚动条的容器::滚动条属性{}
就可以在里面设置对应的样式了。

如以下代码，修改的是整个页面的滚动条：

　　body::-webkit-scrollbar {

  　　width: 5px;

　　}

　　body::-webkit-scrollbar-thumb {

  　　border-radius: 10px;

  　　-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

  　　opacity: 0.2;

  　　background: fade(@primary-color, 60%);

　　}

　　body::-webkit-scrollbar-track {

　　  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

　　  border-radius: 0;

　　  background: fade(@primary-color, 30%);

　　}