如何阻止Bootstrap 5各标签面板同步滚动位置？

问题核心是默认情况下所有标签面板共享同一个滚动上下文（比如body或父容器），切换时会继承当前滚动位置。要实现每个标签面板保存独立滚动位置，可按以下步骤处理：

1. 修改HTML结构，添加独立滚动容器 #

给每个tab-pane内部嵌套一个专属的滚动容器，让每个标签的内容在独立容器内滚动：

<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <div class="tab-scroll-container">
    <!-- 原标签内容 -->
  </div>
</div>

<div class="tab-pane fade" id="different" role="tabpanel" aria-labelledby="different-tab">
  <div class="tab-scroll-container">
    <!-- 原标签内容 -->
  </div>
</div>

2. 设置滚动容器样式 #

给滚动容器指定高度并开启垂直滚动，确保内容超出时可独立滚动：

.tab-scroll-container {
  height: 400px; /* 根据实际需求调整高度，也可使用max-height */
  overflow-y: auto;
  padding-right: 8px; /* 避免滚动条遮挡内容，可选 */
}

3. 用JavaScript保存和恢复滚动位置 #

借助Bootstrap的标签切换事件，监听滚动动作并记录每个标签的滚动位置，切换时自动恢复：

// 存储每个标签的滚动位置
const tabScrollPositions = {};
// 当前激活的标签ID
let activeTabId = '';

// 监听滚动事件，实时保存当前激活标签的滚动位置
document.querySelectorAll('.tab-scroll-container').forEach(container => {
  container.addEventListener('scroll', function() {
    if (activeTabId) {
      tabScrollPositions[activeTabId] = this.scrollTop;
    }
  });
});

// 标签切换前，保存当前激活标签的滚动位置
document.addEventListener('show.bs.tab', function(e) {
  const currentActivePane = document.querySelector('.tab-pane.active');
  if (currentActivePane) {
    const scrollContainer = currentActivePane.querySelector('.tab-scroll-container');
    if (scrollContainer) {
      tabScrollPositions[currentActivePane.id] = scrollContainer.scrollTop;
    }
  }
});

// 标签切换完成后，恢复目标标签的滚动位置
document.addEventListener('shown.bs.tab', function(e) {
  activeTabId = e.target.getAttribute('data-bs-target').replace('#', '');
  const targetPane = document.getElementById(activeTabId);
  const scrollContainer = targetPane.querySelector('.tab-scroll-container');
  
  if (scrollContainer && tabScrollPositions[activeTabId] !== undefined) {
    scrollContainer.scrollTop = tabScrollPositions[activeTabId];
  }
});

这样每个标签面板的滚动位置就会独立保存，切换标签时会自动回到之前停留的位置。

内容的提问来源于stack exchange，提问作者corieleclair