用css改变谷歌的滚动条

html

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15

css样式

.swiperUl{
    width:200px;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    line-height: 0;
}
.swiperUl li{
  display: inline-block;
  margin-right: 10px;
}
.swiperUl::-webkit-scrollbar{/*滚动条整体样式*/
          width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
          height: 5px;
 }
 .swiperUl::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
   }
   .swiperUl::-webkit-scrollbar-track{/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }