实现代码如下:
HTML
<div class="x-roll-top">
<div class="x-roll">
<div class="x-roll-item">
<div class="circle">
<img src="" alt="">
</div>
</div>
<div class="x-roll-item">
<div class="circle">
<img src="" alt="">
</div>
</div>
<div class="x-roll-item">
...
</div>
<div class="x-roll-item">
...
</div>
<div class="x-roll-item">
...
</div>
<div class="x-roll-item">
...
</div>
</div>
</div>
CSS
给父盒子(class=“x-roll”)设置 overflow: scroll
在父盒子外再设置一个大的父盒子,大的父盒子的高度恰好不能显示其子盒子(即class=“x-roll”)的滚动条,设置 overflow: hidden
body .x-roll-top {
width: 100%;
height: 110px;
overflow: hidden;
background-color: aliceblue;
}
body .x-roll-top .x-roll {
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 10px 8px 20px;
box-sizing: border-box;
height: 120px;
overflow: scroll;
}
body .x-roll-top .x-roll .x-roll-item {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
body .x-roll-top .x-roll .x-roll-item .circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
body .x-roll-top .x-roll .x-roll-item .circle img {
width: 49%;
height: auto;
}
实现这个效果只需再上一个效果的基础上加入几句代码
scroll-snap- 的解释可以看我的上一篇博客:
scroll-snap- 滚动捕捉
- 在父元素上添加
scroll-snap-type: x mandatory
- 子元素上添加:
scroll-snap-align: center
scroll-snap-stop:always