firefox 中无法单独删除局部滚动容器的箭头，因其不支持 ::-webkit-scrollbar-button，唯一可靠方式是通过 scrollbar-width: none 彻底隐藏整条滚动条，且该属性必须作用于具体滚动容器（如 .scroll-container），不可写在 html 或 body 上；若父级存在 overflow: hidden 或 transform，会截断滚动上下文导致失效。
Firefox 里局部滚动容器的箭头删不掉？
不是 CSS 没写对，是 Firefox 根本不认 ::-webkit-scrollbar-button。它把箭头当成本地 UI 组件，无法用伪元素单独剥离。唯一可靠方式是让整条滚动条消失：scrollbar-width: none 必须作用于具体滚动容器（比如 .scroll-container），不能写在 html 或 body 上——Firefox 会直接忽略。
常见错误：
-
scrollbar-width: none写在body上，但容器实际滚动的是子div，失效 - 父级有
overflow: hidden或transform，截断了滚动上下文，导致scrollbar-width不触发 - 用了
scrollbar-color: transparent transparent却没配scrollbar-width: none，箭头仍在
Chrome/Edge/Safari 怎么干掉 ::-webkit-scrollbar-button
WebKit/Blink 内核中，箭头属于 ::-webkit-scrollbar-button，但它必须和 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 一起声明才稳定生效。只写 display: none 在 macOS Chrome 等环境下容易被跳过。
安全写法（四者缺一不可）：
.scroll-container {
overflow-y: auto;
}
.scroll-container::-webkit-scrollbar {
width: 0;
height: 0;
}
.scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
background: transparent;
}
.scroll-container::-webkit-scrollbar-button {
display: none;
}
注意：width: 0 比 opacity: 0 或 visibility: hidden 更可靠——后者仍占点击区域，可能干扰触摸操作。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么局部滚动容器设了 overflow: auto 还看不到箭头控制？
因为“两端箭头”只在明确需要时渲染：Firefox 默认只在 overflow: scroll 下显示箭头；Chrome/macOS Safari 则基本不渲染箭头（即使内容溢出）；Windows Chromium 旧版可能 fallback 显示，但新版已统一隐藏。所以你“看不到箭头”，大概率不是隐藏成功，而是它本来就没出现。
真正要处理箭头的场景很窄：
- Firefox 桌面端 +
overflow: scroll+ 容器有固定宽高 - Electron 应用（基于旧版 Chromium，未同步滚动条策略）
- 强制设了
scrollbar-width: auto且未覆盖
iOS Safari 隐藏箭头的现实约束
iOS 15+ 对 ::-webkit-scrollbar 的触发条件更苛刻：只有当容器同时满足 overflow-y: scroll（不能是 auto）且内容真实溢出时，伪元素才生效。哪怕只差 1px，::-webkit-scrollbar-button 都不会被创建，自然也谈不上隐藏。
所以 iOS 上最稳的方案是绕开箭头问题本身：
- 改用
scrollbar-width: none（仅限垂直滚动条，iOS Safari 支持） - 避免依赖原生滚动，改用
transform: translateY()+touchmove手动控制（但会丢失scrollIntoView和键盘导航） - 真机测试比模拟器更关键——很多问题只在 Safari 实际滚动时暴露
箭头只是滚动条最表层的视觉残留，真正难缠的是跨浏览器滚动上下文的一致性：Firefox 的 scrollbar-width 不继承、WebKit 的伪元素需成套声明、iOS 的触发阈值不可见——这些细节不提前压平，后期调试会卡在“看起来一样，行为却不同”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
