移动端横向 滚动js实现

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
  <div class="scroll-item">Item 3</div>
  <!-- 更多项 -->
</div>

.scroll-container {
  display: flex;
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止内容换行 */
  -webkit-overflow-scrolling: touch; /* 提供平滑的滚动体验 */
}

.scroll-item {
  flex: 0 0 auto; /* 防止项目收缩 */
  margin-right: 10px; /* 项目之间的间距 */
}

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.scroll-container');

  // 自动滚动示例
  let scrollPosition = 0;
  setInterval(() => {
    scrollPosition -= 1; // 向左滚动
    container.scrollLeft = scrollPosition;
  }, 50);

  // 响应用户点击事件示例
  container.addEventListener('click', function(event) {
    if (event.target.classList.contains('scroll-item')) {
      const itemIndex = Array.from(container.children).indexOf(event.target);
      const itemWidth = event.target.offsetWidth;
      container.scrollTo({
        left: itemIndex * itemWidth,
        behavior: 'smooth'
      });
    }
  });
});