css3自定义流动条

 1       <style>
 2         .item {
 3             height: 180px;
 4             overflow: auto;
 5             width: 180px;
 6             float: left;
 7             margin: 11px;
 8             box-shadow: 0 0 7px rgba(0, 0, 0, 0.32);
 9             border-radius: 6px;
10             padding: 10px;
11         }
12 
13         .item-body {
14             height: 500px;
15         }
16 
17         .s1::-webkit-scrollbar {
18             height: 4px;
19             width: 4px
20         }
21 
22         .s1::-webkit-scrollbar-thumb {
23             background: rgba(0,0,0,.26)
24         }
25 
26     </style>
27      <div class="item s1">
28         <div class="item-body">sdfsdf</div>
29     </div>

  //"&"是必须与上一层同级

  &::-webkit-scrollbar

  //-webkit-scrollbar : 整体的scrollbar样式

  //bar的样式

  &::-webkit-scrollbar-thumb

  //軌道的樣式

  &::-webkit-scrollbar-track