用css改变谷歌的滚动条

html

<ul class="swiperUl">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

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);
    }