不能靠断点类直接隐藏滚动条，必须用媒体查询配合伪元素规则；d-none无效因滚动条非DOM元素；需明确尺寸约束与overflow值才能触发滚动条显示。
不能靠断点类直接隐藏滚动条——overflow-hidden、overflow-auto等 Bootstrap 工具类本身不响应断点，它们只控制 overflow 值，且无媒体查询封装。所谓“特定断点下隐藏”，必须手写媒体查询 + 伪元素规则，否则要么全屏生效，要么压根不生效。
为什么 d-none 不适用于滚动条隐藏
d-none 是作用于元素自身的显示控制，而滚动条是浏览器渲染层生成的 UI 组件，不属于 DOM 元素，无法被 d-none 或任何响应式栅格类影响。试图用 d-md-none 去“隐藏滚动条”，结果只会让容器消失，而不是滚动条消失。
- 滚动条是否出现，取决于容器是否满足两个条件：有明确高度/宽度约束 +
overflow: auto或scroll - 滚动条是否可见，取决于
::-webkit-scrollbar和scrollbar-width的样式控制，二者都需显式声明在具体选择器内 - Bootstrap 的断点类（如
d-md-block）仅改变display，对伪元素、overflow值或滚动行为零影响
在 md 断点及以上隐藏垂直滚动条的写法
想在中屏（md 及以上）隐藏某个容器的滚动条，但保留小屏可滚动，就得把伪元素规则和 overflow 控制一起放进媒体查询里。注意：Firefox 需要 @supports 包裹 scrollbar-width，否则无效。
@media (min-width: 768px) {
.my-scrollable {
overflow-y: scroll;
}
.my-scrollable::-webkit-scrollbar {
display: none;
}
@supports (scrollbar-width: none) {
.my-scrollable {
scrollbar-width: none;
}
}
}
- 必须写
overflow-y: scroll（不是auto），否则小屏下可能不触发滚动上下文，导致隐藏逻辑失效 -
::-webkit-scrollbar规则不能丢在:root或全局*下，必须绑定到具体类名，否则不匹配 - 如果该容器在小屏下本不该滚动，就别加媒体查询——先确认它在小屏确实需要滚动，再针对性隐藏大屏的条
隐藏 body 滚动条但只在 lg+ 生效的陷阱
很多人想“桌面端禁用页面滚动，移动端保留”，于是给 html, body 加媒体查询。这很危险：一旦 body 的 overflow 被设为 hidden，所有 scrollTop、scrollIntoView()、Tab 键导航、屏幕阅读器聚焦都会中断，且无法局部恢复。
立即学习“前端免费学习笔记（深入）”；
- 真正安全的做法是：只对局部容器（如
.sidebar、.modal-body）做断点滚动控制，避开body - 若真要锁
body，必须同步处理html高度：html { height: 100%; }，否则媒体查询里的overflow: hidden在多数浏览器下压根不生效 - iOS Safari 对
body的overflow处理异常，尤其在vh布局中，建议改用position: fixed; top: 0; left: 0; width: 100%; height: 100%替代
最常被忽略的一点：伪元素隐藏滚动条，只管“样式是否渲染”，不管“滚动能力是否存在”。哪怕你写了十层媒体查询，只要容器没设 height、父级没传下来尺寸、或者 overflow 值根本没生效，那滚动条连出现的机会都没有——自然也谈不上“在哪个断点下隐藏它”。
