公司需要做一个手机横向滑动的效果,不想用js插件,太麻烦,导入代码也多。所以去网上找了一下,用css就能实现,挺方便的。主要利用了display:-webkit-box来实现。
<!DOCTYPE html>
<html>
<head>
<title>横向滑动</title>
<style type="text/css">
.slide-box{
margin-top: 200px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
/*去掉滚动条*/
.slide-box::-webkit-scrollbar{
width:0;
height:0;
display: none;
}
.slide-item{
width: 200px;
height: 200px;
border:1px solid #ccc;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
</body>
</html>