js手机横向滚动导航

<div class="scroll-container">
  <ul class="nav-list">
    <li class="nav-item">Home</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Services</li>
    <li class="nav-item">Contact</li>
    <!-- 更多菜单项 -->
  </ul>
</div>

.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.nav-list {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}

document.querySelector('.nav-list').addEventListener('touchstart', handleTouchStart, false);
document.querySelector('.nav-list').addEventListener('touchmove', handleTouchMove, false);

let xDown = null;
let yDown = null;

function handleTouchStart(evt) {
  const firstTouch = evt.touches[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  const xUp = evt.touches[0].clientX;
  const yUp = evt.touches[0].clientY;

  const xDiff = xDown - xUp;
  const yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      // 向左滑动
      console.log('swipe left');
    } else {
      // 向右滑动
      console.log('swipe right');
    }
  }

  xDown = null;
  yDown = null;
}

.scroll-container {
  will-change: transform;
}

function handleTouchMove(evt) {
  evt.preventDefault();
  // 其他逻辑
}