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{/*滾動(dòng)條整體樣式*/
          width: 5px;     /*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
          height: 5px;
 }
 .swiperUl::-webkit-scrollbar-thumb{/*滾動(dòng)條里面小方塊*/
        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{/*滾動(dòng)條里面軌道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }