js 控制flex盒子内容手机触屏左右滚动

在JavaScript中控制Flex布局的元素在手机触屏上左右滚动，我们可以结合CSS媒体查询和触摸事件来实现。这里是一个简单的示例：

1. CSS设置基础Flex布局：

.container {
  display: flex;
  justify-content: space-between; /* 分散元素 */
  overflow-x: auto; /* 添加水平滚动 */
  -ms-overflow-style: none; /* 避免IE下滚动条 */
  scrollbar-width: none; /* 移除滚动条 */
}

/* 在触摸设备上启用滚动条 */
@media (hover: none) and (pointer: coarse) {
  .container {
    scrollbar-width: auto;
  }

  .container::-webkit-scrollbar {
    width: 5px; /* 自定义滚动条宽度 */
  }

  .container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

2. JavaScript触碰事件处理：

const container = document.querySelector('.container');

container.addEventListener('touchstart', function(e) {
  startTouchX = e.touches[0].clientX;
});

container.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 阻止默认滚动
  const endTouchX = e.touches[0].clientX;
  const diff = Math.abs(startTouchX - endTouchX);

  if (diff > 20) { // 当左右移动距离超过一定的阈值时触发滚动
    if (endTouchX < startTouchX) {
      // 左滑，向右滚动
      container.scrollLeft += diff / 2; // 滑动距离
    } else {
      // 右滑，向左滚动
      container.scrollLeft -= diff / 2;
    }
  }
});

注意，这个示例假设`container`是包含所有需要滚动内容的Flex容器。