实现手机端的触屏滑动效果

实现代码如下:

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- 滚动捕捉

1. 在父元素上添加 scroll-snap-type: x mandatory
2. 子元素上添加: scroll-snap-align: center scroll-snap-stop:always