Vue做移动端项目修改滚动条样式

overflow属性先设置好auto或者scroll，而不是hidden，毕竟我们仅仅是隐藏了滚动条，而不是让它整个都不能滚动！

---

属性

::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   定义右下角拖动块的样式

---

注：

注意水平滚动条只能设height，width是随着屏幕变化的。而竖直滚动条只能设width。

---

自定义滚动条

必须定义一个::webkit-scrollbar，而且里面必须有内容，接下来的::webkit-scrollbar-track等设置才能生效。而且后面的属性会覆盖前面的属性。

/*例子：更换滚动条的颜色*/
div{
	  &::-webkit-scrollbar{/*必须先设置这个属性*/
        background-color:red;
    	}
      &::-webkit-scrollbar-track{
      	background-color:green;
      }	
}