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