移动端列表元素的滑动,不用swiper,但是仅用overflow: auto,滑动到的位置无法控制。
解决方案:父元素设置 scroll-snap-type: x mandatory;
子元素设置:scroll-snap-align: start;
注意:该样式推荐在移动端使用,纯在一定的兼容性问题
效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
}
.container{
width: 375px;
display: flex;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.container div{
width: 100px;
padding: 10px;
scroll-snap-align: start;
}
.container img{
width: 80px;
}
.container1 div{
width: 375px;
}
.container1 img{
width: 355px;
}
</style>
</head>
<body>
<h1>导航图标滚动</h1>
<div class="container">
<div><img src="https://img1.baidu.com/it/u=3353201715,2373215519&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=3709188896,3555962561&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=2034165975,3896208670&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img1.baidu.com/it/u=3353201715,2373215519&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=3709188896,3555962561&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=2034165975,3896208670&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img1.baidu.com/it/u=3353201715,2373215519&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=3709188896,3555962561&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=2034165975,3896208670&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img1.baidu.com/it/u=3353201715,2373215519&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=3709188896,3555962561&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
<div><img src="https://img0.baidu.com/it/u=2034165975,3896208670&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
</div>
<h1>banner滚动</h1>
<div class="container container1">
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00342-3415.jpg" alt=""></div>
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00277-814.jpg" alt=""></div>
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00127-8.jpg" alt=""></div>
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00342-3415.jpg" alt=""></div>
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00277-814.jpg" alt=""></div>
<div><img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00127-8.jpg" alt=""></div>
</div>
</body>
</html>