如何使选项卡在颤动中可滚动

<div class="tab-container">
  <div class="tab-wrapper">
    <div class="tab">选项卡1</div>
    <div class="tab">选项卡2</div>
    <div class="tab">选项卡3</div>
    <div class="tab">选项卡4</div>
    <div class="tab">选项卡5</div>
    <div class="tab">选项卡6</div>
    <!-- 更多选项卡... -->
  </div>
</div>

.tab-container {
  width: 100%;
  overflow-x: auto;
}

.tab-wrapper {
  display: flex;
  flex-wrap: nowrap;
  padding: 10px;
}

.tab {
  flex: 0 0 auto;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab:hover {
  background-color: #ccc;
}

const tabWrapper = document.querySelector('.tab-wrapper');
const tabs = document.querySelectorAll('.tab');

let isMouseDown = false;
let startX = 0;
let scrollLeft = 0;

tabWrapper.addEventListener('mousedown', (e) => {
  isMouseDown = true;
  startX = e.pageX - tabWrapper.offsetLeft;
  scrollLeft = tabWrapper.scrollLeft;
});

tabWrapper.addEventListener('mouseleave', () => {
  isMouseDown = false;
});

tabWrapper.addEventListener('mouseup', () => {
  isMouseDown = false;
});

tabWrapper.addEventListener('mousemove', (e) => {
  if (!isMouseDown) return;
  e.preventDefault();
  const x = e.pageX - tabWrapper.offsetLeft;
  const walk = (x - startX) * 3; // 控制滚动速度
  tabWrapper.scrollLeft = scrollLeft - walk;
});