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

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

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;
}