Bootstrap标签页：切换不同长度标签页时禁止自动滚动

问题场景 #

我有多个内容长度不一的Bootstrap标签页，代码如下：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam rem accusantium dolor voluptates delectus nesciunt id laudantium et pariatur ipsum nihil inventore sit culpa voluptatem vero, necessitatibus, magnam quasi! Ab perferendis, earum molestiae placeat nihil inventore consequuntur? Saepe architecto adipisci earum ullam consequuntur eius laboriosam officiis esse officia a veritatis perferendis beatae ipsa aperiam ut laborum commodi dolorem quo, harum quae. Dolor voluptate sint unde totam saepe consequatur repellat, praesentium debitis soluta illo veritatis? Dolorum veritatis non totam, alias soluta voluptate, porro corrupti accusamus enim autem placeat quisquam eos, quos mollitia nihil voluptas magni. Impedit autem esse a omnis corrupti?
</div>
</div>

切换不同长度的标签页（尤其是从长内容切换到短内容）时，屏幕会自动滚动，导致标签标题位置变动，想让标签标题始终固定在同一位置，该怎么处理？

解决方法 #

方法1：固定标签内容区域高度（CSS方案） #

给标签内容容器设置最小高度，确保切换标签时页面整体高度不会大幅变化，从根源避免浏览器自动滚动。如果内容过长，还可以添加内部滚动条保证内容可查看：

#myTabContent {
  min-height: 500px; /* 数值根据你最长标签内容的高度调整 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

方法2：阻止焦点触发的自动滚动（JS方案） #

Bootstrap切换标签时会自动把焦点移到对应的内容面板，浏览器会滚动到焦点元素位置。可以监听标签切换完成事件，把焦点放回标签按钮，同时锁定当前滚动位置：

const tabContainer = document.getElementById('myTab');

tabContainer.addEventListener('shown.bs.tab', function(e) {
  // 将焦点移回被点击的标签按钮
  e.target.focus();
  // 保持当前滚动位置不变
  window.scrollTo(window.scrollX, window.scrollY);
});

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