需对特定容器隐藏滚动条但保留滚动功能：必须设明确高度（height/max-height）和overflow-y: auto/scroll，Chrome/Safari用::-webkit-scrollbar全置透明，Firefox用scrollbar-width: none作用于该容器，iOS须真机测试并强制overflow-y: scroll。
只对特定隐藏滚动条，别动body或html
直接给 html 或 body 加 overflow: hidden 会锁死整个页面滚动，这不是“局部”——你要的只是某个抽屉、侧边栏或卡片区域不显示滚动条，但内容仍能滚。关键在目标容器本身必须满足两个前提：overflow-y: auto（或 scroll），且有明确高度约束（height 或 max-height），否则浏览器根本不会触发滚动机制，::-webkit-scrollbar 和 scrollbar-width 都无效。
Chrome/Safari/Edge 隐藏滚动条的最小可靠写法
::-webkit-scrollbar 单独设 width: 0 在 macOS Chrome 或新版 Safari 上经常失效，必须同时控制轨道和滑块：
- 给容器加
overflow-y: scroll（不是 auto，iOS Safari 对 auto 下的伪元素支持极差）
.container::-webkit-scrollbar { width: 0; height: 0; }.container::-webkit-scrollbar-track { background: transparent; }.container::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
缺任意一项，某些版本可能回退到默认滚动条；若容器有 transform 或 will-change，加 overflow: scroll 强制重绘更稳。
Firefox 必须用 scrollbar-width，且不能写在 html 或 body 上
scrollbar-width: none 只对实际可滚动的非根元素生效。写在 html 或 body 上完全被忽略——这是最常踩的坑。
- 确保目标容器是独立的
div，比如
- CSS 写成：
.sidebar { overflow-y: auto; scrollbar-width: none; scrollbar-color: transparent transparent; }
- 祖先链中不能有
overflow: hidden，否则子级滚动被截断
iOS Safari 滚动条藏不住？真机测试比模拟器重要
iOS 15+ 对 ::-webkit-scrollbar 的触发条件变严格：只有当容器真实溢出且 overflow-y: scroll 时才渲染伪元素。模拟器常误判，真机一试就露馅。
- 强制写
overflow-y: scroll（哪怕内容刚好不溢出）
- 优先用
scrollbar-width: none —— iOS Safari 16+ 已支持该属性，且比伪元素稳定
- 动态加载内容后，别依赖 CSS 自动适配：先设
height: 0; overflow: hidden，等 DOM 渲染完成再用 getBoundingClientRect().height 算高，平滑过渡
滚动条闪现、iOS 上突然出现、Firefox 里拖不动——这些问题几乎都卡在「高度没算准」或「写错作用域」上，而不是语法本身。
直接给 html 或 body 加 overflow: hidden 会锁死整个页面滚动，这不是“局部”——你要的只是某个抽屉、侧边栏或卡片区域不显示滚动条，但内容仍能滚。关键在目标容器本身必须满足两个前提：overflow-y: auto（或 scroll），且有明确高度约束（height 或 max-height），否则浏览器根本不会触发滚动机制，::-webkit-scrollbar 和 scrollbar-width 都无效。
Chrome/Safari/Edge 隐藏滚动条的最小可靠写法
::-webkit-scrollbar 单独设 width: 0 在 macOS Chrome 或新版 Safari 上经常失效，必须同时控制轨道和滑块：
- 给容器加
overflow-y: scroll（不是auto，iOS Safari 对auto下的伪元素支持极差） .container::-webkit-scrollbar { width: 0; height: 0; }.container::-webkit-scrollbar-track { background: transparent; }.container::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }
缺任意一项，某些版本可能回退到默认滚动条；若容器有 transform 或 will-change，加 overflow: scroll 强制重绘更稳。
Firefox 必须用 scrollbar-width，且不能写在 html 或 body 上
scrollbar-width: none 只对实际可滚动的非根元素生效。写在 html 或 body 上完全被忽略——这是最常踩的坑。
- 确保目标容器是独立的
div，比如 - CSS 写成：
.sidebar { overflow-y: auto; scrollbar-width: none; scrollbar-color: transparent transparent; } - 祖先链中不能有
overflow: hidden，否则子级滚动被截断
iOS Safari 滚动条藏不住？真机测试比模拟器重要
iOS 15+ 对 ::-webkit-scrollbar 的触发条件变严格：只有当容器真实溢出且 overflow-y: scroll 时才渲染伪元素。模拟器常误判，真机一试就露馅。
- 强制写
overflow-y: scroll（哪怕内容刚好不溢出） - 优先用
scrollbar-width: none—— iOS Safari 16+ 已支持该属性，且比伪元素稳定 - 动态加载内容后，别依赖 CSS 自动适配：先设
height: 0; overflow: hidden，等 DOM 渲染完成再用getBoundingClientRect().height算高，平滑过渡
滚动条闪现、iOS 上突然出现、Firefox 里拖不动——这些问题几乎都卡在「高度没算准」或「写错作用域」上，而不是语法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
