如何阻止Bootstrap 5按钮组点击后自动居中滚动

问题原因 #

点击按钮后，浏览器会自动将获得焦点的元素滚动到可视区域内；由于你给容器设置了固定的滚动高度，浏览器会把这个容器当作视口计算，最终导致按钮被滚动到容器中间位置。

可行解决方案 #

方法1：点击后强制恢复原滚动位置 #

通过JavaScript记录点击前的滚动位置，等浏览器自动滚动完成后再恢复回去，能精准保持原位置：

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 定位垂直按钮组内的所有按钮
  document.querySelectorAll('.btn-group-vertical .btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // 找到对应的滚动容器
      const scrollContainer = this.closest('[style*="overflow-y: auto"]');
      // 记录当前滚动位置
      const currentScrollTop = scrollContainer.scrollTop;
      // 延迟执行恢复操作，确保浏览器自动滚动已完成
      setTimeout(() => {
        scrollContainer.scrollTop = currentScrollTop;
      }, 0);
    });
  });
});

方法2：禁止按钮获取焦点（谨慎使用，影响无障碍访问） #

给每个按钮添加tabindex="-1"属性，点击后按钮不会触发焦点滚动，但键盘用户无法通过Tab键选中按钮，适合对无障碍要求不高的场景：

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-secondary" tabindex="-1">按钮1</button>
  <button type="button" class="btn btn-secondary" tabindex="-1">按钮2</button>
  <!-- 其他按钮同理添加属性 -->
</div>

方法3：用CSS全局禁用焦点滚动 #

给所有获焦元素设置scroll-margin为0，阻止浏览器自动调整滚动位置，注意这是全局设置，可能影响其他页面元素：

:focus {
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
}

在Razor页面中的使用方式 #

将方法1的JavaScript代码放到页面的Scripts区块中即可：

@section Scripts {
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('.btn-group-vertical .btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const scrollContainer = this.closest('[style*="overflow-y: auto"]');
          const currentScrollTop = scrollContainer.scrollTop;
          setTimeout(() => {
            scrollContainer.scrollTop = currentScrollTop;
          }, 0);
        });
      });
    });
  </script>
}

内容的提问来源于stack exchange，提问作者Master of my Domain