直接用::-webkit-scrollbar{display:none}+scrollbar-width:none配合overflow:auto和明确高度可隐藏滚动条并保留全部滚动功能；overflow:hidden则彻底禁用滚动上下文，导致scrollTop失效、scrollIntoView()静默失败、键盘及屏幕阅读器无法访问溢出内容。
直接用 ::-webkit-scrollbar { display: none; } + scrollbar-width: none;，配合 overflow: auto 和明确高度，就能视觉隐藏滚动条，滚动、键盘导航、屏幕阅读器全都不受影响。
为什么 overflow: hidden 不行
它不是“隐藏滚动条”，是直接砍掉滚动上下文：
-
scrollTop读不到值，scrollIntoView()静默失败 - Tab 键无法聚焦溢出区域内的元素，键盘用户被拦在外面
- 屏幕阅读器跳过被截断内容，无障碍直接失效
- 在 Bootstrap 的 flex 布局里，还可能意外触发父级或
body滚动
::-webkit-scrollbar 和 scrollbar-width 怎么写才生效
两个属性必须落在具体容器选择器里，不能只丢在 :root 或全局 * 下：
- Chrome / Edge / Safari 16.4+：
::-webkit-scrollbar { display: none; } - iOS Safari ≤15 或旧版 macOS Safari：降级为
::-webkit-scrollbar { width: 0; height: 0; }，并清空::-webkit-scrollbar-track和::-webkit-scrollbar-thumb - Firefox 64+：
scrollbar-width: none;，必须和overflow-y: auto同级写在目标容器上（比如.card-body），写在html或body上会失效 - IE/旧 Edge（已淘汰）：
-ms-overflow-style: none;，仅作历史兼容
Bootstrap 4 容器里最容易漏的三步
伪元素再全也没用，如果这三步没做，滚动条根本不会出现——自然也谈不上“隐藏”：
立即学习“前端免费学习笔记（深入）”；
- 给容器设明确高度：比如
height: 100%、max-height: 500px，或用flex-fill+ 父级d-flex flex-column - 必须加
overflow-y: auto（或scroll），否则浏览器不创建滚动上下文 - 局部滚动时（如
.card-body），要确保html, body已锁住：加html, body { height: 100%; overflow-y: hidden; }，否则 Bootstrap 的vh或 flex 布局会撑出全局滚动
移动端记得加 -webkit-overflow-scrolling: touch，不然 iOS Safari 滚动卡顿，还可能闪出原生滚动条；另外，所有伪元素样式必须写在 <style> 标签或外部 CSS 文件里，内联样式无效。
