Bootstrap 5 中 .btn-check 隐藏单选按钮时默认使用 position: absolute，导致父容器在聚焦时触发滚动定位到视觉中心；本文提供符合无障碍标准的纯 CSS 替代方案，彻底禁用该意外滚动行为。
bootstrap 5 中 `.btn-check` 隐藏单选按钮时默认使用 `position: absolute`，导致父容器在聚焦时触发滚动定位到视觉中心；本文提供符合无障碍标准的纯 css 替代方案，彻底禁用该意外滚动行为。
在 Bootstrap 5 的垂直按钮组（.btn-group-vertical）中，当内部包含隐藏的 时，用户点击可见的
根本原因：.btn-check 的默认隐藏逻辑不兼容可滚动容器
Bootstrap 5 默认通过以下样式隐藏 btn-check 输入框：
.btn-check {
position: absolute;
z-index: -1;
opacity: 0;
}
position: absolute 使元素脱离文档流，但其逻辑焦点位置仍锚定在 DOM 顺序中的原始位置（即容器顶部）。当 label 被点击，关联的 radio 获得焦点，浏览器为确保“焦点可见”，强制滚动容器，使其原始位置进入视口中心——这正是你观察到的“每次点击都跳到中间”的现象。
✅ 推荐解决方案：使用无障碍友好的视觉隐藏技术
替代 position: absolute，应采用 WCAG 推荐的视觉隐藏但保留屏幕阅读器可访问性的方式：通过 clip-path + 尺寸归零 + overflow: hidden 组合，既移除视觉渲染，又保持元素在流内占位（避免滚动扰动），同时确保辅助技术仍能读取。
将以下 CSS 插入你的样式表（建议置于 Bootstrap 引入之后，以确保覆盖）：
/* 安全替换 Bootstrap .btn-check 默认隐藏方式 */
.btn-check {
/* 彻底视觉隐藏，但保留在流中 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); /* 现代浏览器首选 */
height: 1px;
width: 1px;
margin: -1px; /* 微调避免布局偏移 */
overflow: hidden;
padding: 0;
border: 0;
/* 关键：移除 position: absolute，恢复为 static */
position: static !important;
}
✅ 优势说明：
- position: static !important 强制取消绝对定位，使 radio 回归文档流（虽尺寸为 1px，但不再触发错误滚动锚点）；
- clip-path: inset(50%) 是现代、语义清晰的裁剪方式，比旧式 clip 更可靠；
- margin: -1px 补偿微小占位，避免相邻元素间距异常；
- 完全符合 WebAIM 隐形内容指南，屏幕阅读器仍可正常朗读 label 关联的 radio 值。
? 使用示例（整合进你的 HTML）
无需修改 HTML 结构，仅添加上述 CSS 即可生效。确认你的 仍保持 class="btn-check"，且
<!-- 你的原有结构完全保留 --> <input type="radio" class="btn-check" name="available" id="46046" value="Scottie Scheffler"><label class="btn btn-sm btn-outline-secondary rounded" for="46046">1 - Scottie Scheffler</label>
⚠ 注意事项与验证步骤
- 不要移除 tabindex="-1" 或 aria-hidden：Bootstrap 的 btn-check 本身不需额外 ARIA 属性，上述方案已兼顾可访问性。
- 避免混合使用 display: none 或 visibility: hidden：二者会使元素完全不可聚焦，破坏键盘导航和屏幕阅读器支持。
-
验证方法：
- 点击任意按钮，观察滚动是否停止；
- 使用键盘 Tab 导航，确认 radio 可被聚焦（无视觉变化但有焦点轮廓）；
- 开启 NVDA/JAWS，检查 label 文本是否被正确朗读。
✅ 总结
该问题本质是 CSS 隐藏策略与浏览器聚焦机制的冲突。通过放弃 position: absolute，改用语义化、无障碍优先的视觉隐藏方案，既能根治滚动跳转，又能保障所有用户（包括残障人士）的正常使用体验。此方案轻量、稳定、无需 JavaScript 干预，是 Bootstrap 5 垂直按钮组在可滚动容器中的最佳实践。
