移动端抽屉菜单滚动条无法彻底隐藏，因iOS Safari对::-webkit-scrollbar支持极差，即使设width:0仍可能闪现；需组合overflow-y:scroll、-webkit-overflow-scrolling:touch及全透明伪元素，并确保抽屉有max-height约束且父级无overflow:hidden干扰。
移动端抽屉菜单里滚动条还在显示？
iOS Safari 和 Android Chrome 默认不会隐藏原生滚动条，但抽屉菜单（尤其是 position: fixed + overflow-y: auto 的侧边栏）一旦内容超长，就会露出丑陋的滚动条——尤其在 iOS 上，它默认半透明、带拖拽手柄，破坏 UI 一致性。
用 ::-webkit-scrollbar 能直接干掉吗？
不能全信。这个伪元素只在基于 WebKit 的浏览器（Chrome、Safari、Edge）生效，且iOS Safari 对它的支持非常有限：即使写了 display: none 或 width: 0，滚动条仍可能在滚动中短暂闪现，或拖拽区域残留。
更稳妥的做法是组合使用：
-
overflow-y: scroll（强制启用滚动，避免 Safari 因“不触发滚动”而忽略样式） -
-webkit-overflow-scrolling: touch（保持 iOS 惯性滚动，否则会卡顿） -
::-webkit-scrollbar系列规则设为不可见
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.drawer-menu {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.drawer-menu::-webkit-scrollbar {
width: 0;
height: 0;
}
.drawer-menu::-webkit-scrollbar-track {
background: transparent;
}
.drawer-menu::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 0;
}
为什么加了 overflow-y: scroll 还没用？
常见原因是父容器或抽屉自身没有明确高度约束。移动端抽屉通常靠 height: 100vh 或 max-height: 100vh 控制，但如果父级有 overflow: hidden，或抽屉被 flex 容器挤压，scroll 就不会触发。
检查点：
- 抽屉元素是否设置了
height或max-height（推荐用max-height: 100vh，避免底部被键盘顶起时溢出） - 是否被
transform（如translateX）影响了渲染层，导致滚动上下文丢失 - Android WebView 或某些定制浏览器可能忽略
::-webkit-scrollbar，此时需 fallback 到 JavaScript 模拟滚动（但代价是失去原生惯性）
隐藏后还能滚动吗？
能。隐藏的是视觉滚动条，不是滚动能力本身。用户依然可以上下滑动、用手指拖拽、触发惯性滚动——前提是没误加 overscroll-behavior: contain 或禁用 touch 事件。
特别注意：overscroll-behavior 如果设在抽屉内部，可能阻止下拉刷新穿透，但也可能意外抑制滚动响应；iOS 上若同时用了 touch-action: none（比如为了自定义手势），必须显式保留 touch-action: pan-y，否则整个区域变“滑不动”。
真正容易被忽略的是：当抽屉从右向左展开时，若 body 未锁死 overflow: hidden，页面主体仍可滚动，造成双滚动混乱——这和滚动条样式无关，但常被一并归咎于“隐藏失败”。
