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啦!