如何使用选项卡视图滚动整个屏幕？

<div class="tab-container">
  <ul class="tab-navigation">
    <li class="tab">选项卡1</li>
    <li class="tab">选项卡2</li>
    <li class="tab">选项卡3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane">选项卡1的内容</div>
    <div class="tab-pane">选项卡2的内容</div>
    <div class="tab-pane">选项卡3的内容</div>
  </div>
</div>

.tab-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.tab-navigation {
  display: flex;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.tab {
  flex: 0 0 auto;
  padding: 10px;
  cursor: pointer;
}

.tab-content {
  height: calc(100% - 40px); /* 减去导航栏高度和边距 */
  overflow-y: auto;
}

.tab-pane {
  height: 100%;
  padding: 10px;
}

const tabs = document.querySelectorAll('.tab');
const tabContent = document.querySelector('.tab-content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 切换选项卡样式
    tabs.forEach((tab) => tab.classList.remove('active'));
    tab.classList.add('active');
    
    // 显示对应的内容区域
    const tabPanes = document.querySelectorAll('.tab-pane');
    tabPanes.forEach((pane) => pane.classList.remove('active'));
    tabPanes[index].classList.add('active');
  });
});

// 动态计算选项卡导航栏的宽度
const tabNavigation = document.querySelector('.tab-navigation');
let totalWidth = 0;
tabs.forEach((tab) => {
  totalWidth += tab.offsetWidth;
});
tabNavigation.style.width = `${totalWidth}px`;