css修改滚动条的样式

滚动条的默认样式是这样的：

大灰块做背景，内嵌小灰块做滚动距离的展示。
再加上贴边的宽度，对于内容本身就比较窄的区域来说，这种样式笨重感十足！
单调且无趣！

而像这种样式的滚动条就比较可以了。

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

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

上面是滚动条相关的属性。
我们在css中：
有滚动条的容器::滚动条属性{}
就可以在里面设置对应的样式了。

---

题外话：

less模式下，如何更改定义好的颜色变量的透明度呢？

background: fade(@green, 60%);

fade(颜色变量，透明百分比)

---

至于上面展示效果的css代码就是：

  div::-webkit-scrollbar {
    width: 4px;
  }
  div::-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%);
  }
  div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(@primary-color, 30%);
  }

这样就可以啦，快去试试吧。

这里是飞鱼爱吃米，只授渔，不授鱼！