主流浏览器可通过CSS隐藏滚动条但保留滚动功能：Chrome/Edge用::-webkit-scrollbar设宽高为0并配合track/thumb；Firefox用scrollbar-width:none和scrollbar-color；Safari优先用scrollbar-width:none，iOS需真机测试。
Chrome/Firefox/Safari 隐藏滚动条但保留滚动功能
主流浏览器都能用 CSS 实现「视觉上隐藏滚动条，实际还能滚」，关键不是禁用 overflow，而是把滚动条轨道和滑块设为透明或零宽，同时确保 overflow 保持 auto 或 scroll。
常见错误是直接写 overflow: hidden —— 这会彻底禁用滚动，内容切掉就没了。
- Chrome 和 Edge（基于 Chromium）：用
::-webkit-scrollbar伪元素控制 - Firefox：支持
scrollbar-width和scrollbar-color（仅 Firefox 64+） - Safari（macOS/iOS）：部分支持
::-webkit-scrollbar，但 iOS Safari 对自定义限制较多，建议优先测试真机
最简兼容写法：
.scrollable {
overflow: auto;
}
<p>/<em> WebKit 浏览器（Chrome/Safari/Edge） </em>/
.scrollable::-webkit-scrollbar {
width: 0;
height: 0;
}</p><p>/<em> Firefox </em>/
.scrollable {
scrollbar-width: none; /<em> 隐藏滚动条 </em>/
scrollbar-color: transparent transparent; /<em> 滑块+轨道都透明 </em>/
}为什么 width: 0 在 Chrome 里有时不生效？
因为 ::-webkit-scrollbar 必须配合 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 才能稳定生效；单独设 width: 0 在某些 Chrome 版本（尤其是 macOS 上）会被忽略。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb三个伪元素，哪怕只写display: none或background: transparent - 如果父容器有
transform或will-change，可能触发层叠上下文，导致滚动条渲染异常 —— 此时加overflow: scroll强制重绘更可靠 - 移动端 Safari（iOS 16+）对
::-webkit-scrollbar支持不稳定，scrollbar-width: none是唯一可靠选项，但仅限垂直滚动条
scrollbar-width: none 不起作用？检查这些点
这个属性只在 Firefox 生效，且有严格前提：元素必须有明确的 overflow 值（如 auto、scroll），且不能是根元素（html）直接使用 —— Firefox 对 html 的 scrollbar-width 忽略。
- 写在
html或body上无效 → 改用包裹一层<div class="scroll-container"> <li>父级有 <code>overflow: hidden会截断子级滚动行为 → 检查祖先链的overflow值 - Flex/Grid 容器中子项未设
min-width: 0或min-height: 0，可能导致内容不触发滚动 → 加上这两个值再试 - 确保内容区域有足够高度/宽度（比如
min-height: 200px），否则即使可滚也无感 - 不要移除
tabindex—— 键盘用户仍需聚焦后用方向键滚动 - 若用 JS 模拟滚动（如
element.scrollTo()），记得监听wheel事件并preventDefault，否则默认滚动和自定义逻辑打架 - 无障碍（a11y）提示：屏幕阅读器通常不受影响，但视觉隐藏后建议加
aria-label说明“此区域支持滚动”
隐藏后无法拖拽滚动？别忘了触控和键盘支持
视觉隐藏滚动条 ≠ 功能禁用，但用户可能找不到拖拽入口。尤其在桌面端，失去滑块后，只能靠鼠标滚轮、触控板惯性滚动、方向键或空格键操作；移动端则完全依赖手势。
真正麻烦的是混合场景：比如一个弹窗里既要隐藏滚动条，又得在 iOS Safari 上保证手指滑动不卡顿 —— 这时候得测真机，scrollbar-width 无效就得退到 position: absolute 盖一层遮罩，但要小心盖住点击区域。
