在移动视图中滑动下一行的居中div

<div class="container">
  <div class="centered-div">
    <!-- 内容 -->
  </div>
</div>

.container {
  overflow: scroll; /* 或者 overflow: auto; */
  /* 其他样式属性 */
}

.centered-div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 其他样式属性 */
}

var container = document.querySelector('.container');
var startX, startY;

container.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
});

container.addEventListener('touchmove', function(event) {
  var currentX = event.touches[0].clientX;
  var currentY = event.touches[0].clientY;
  var diffX = startX - currentX;
  var diffY = startY - currentY;

  // 根据滑动方向判断是否滑动到下一行，并执行相应操作
  if (Math.abs(diffY) > Math.abs(diffX) && diffY > 0) {
    // 滑动到下一行的操作
  }
});

container.addEventListener('touchend', function(event) {
  // 滑动结束的操作
});