css实现移动端的横向滚动

之前做的横向滚动基本上都是用swiper.js ,iscroll.js这些插件实现，后来一想，可否不引入插件，自己用css实现，后来在网上搜了一下，发现已经有相关的解决方法，自己就实践了一下，那就直接贴代码吧！

HTML代码:   

<div class="listbox">
   <ul class="list">
　　<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>
　</ul>
</div>

结构是列表上是惯用套路，采用ul实现，简单方便，然后外面套一层div盒子

CSS代码:

<style>
　　.listbox{margin-top:20px;overflow:hidden; border:1px solid #eee;}
　　.listbox .list{
　　　　list-style-type: none;
　　　　display:-webkit-box;
　　　　overflow:auto;
　　}
　　.listbox .list li{ padding:5px 10px;}
</style>

这些代码已经可以实现横向滚动的效果了，但是我们在手机上滑动时有些卡，并不顺畅，css3有个属性，-webkit-overflow-scrolling，它可以控制控制元素在移动设备上是否使用滚动回弹效果

<style>
　　.listbox{margin-top:20px;overflow:hidden;border:1px solid #eee;}
　　.listbox .list{
　　　　list-style-type: none;
　　　　display:-webkit-box;
　　　　overflow:auto;
　　　　-webkit-overflow-scrolling:touch; /*控制元素在移动设备上是否使用滚动回弹效果*/
　　}
　　.listbox .list li{
　　　　padding:5px 10px;
　　}
</style>

 

这时体验就比较好了，但是出现了滚动，建议把里面盒子的高度设置比外边盒子的高度高，就可以去掉滚动条

<style>
　　.listbox{margin-top:20px;overflow:hidden;height:30px; border:1px solid #eee;}
　　.listbox .list{
　　　　list-style-type: none;
　　　　display:-webkit-box;
　　　　height:40px;
　　　　overflow:auto;
　　　　-webkit-overflow-scrolling:touch; /*控制元素在移动设备上是否使用滚动回弹效果*/
　　}
　　.listbox .list li{
　　　　padding:5px 10px;
　　}
</style>

现在就perfect啦！