firefox 桌面端仍显示滚动条箭头，chrome/edge/safari 默认已隐藏；webkit 内核需用 ::-webkit-scrollbar-button { display: none } 移除箭头，firefox 则须设 scrollbar-width: none 彻底隐藏整条滚动条。
滚动条箭头按钮在哪些浏览器里还能看到
现代 Chrome、Edge、Safari（macOS）默认已隐藏滚动条两端的箭头按钮，只保留轨道和滑块；但 Firefox 仍会显示上下/左右小箭头（尤其在 overflow: scroll 下），Windows 上部分旧版 Chromium 内核浏览器（如早期 Edge）也可能渲染箭头。真正需要处理箭头的场景集中在：Firefox 桌面端、某些 Electron 应用、或强制设了 scrollbar-width: auto 的环境。
::-webkit-scrollbar 里怎么干掉箭头
WebKit/Blink 内核中，箭头属于 ::-webkit-scrollbar-button 伪元素。不显式控制它，部分系统（如 Windows）可能 fallback 渲染默认箭头。必须主动设为不可见：
-
::-webkit-scrollbar-button必须配合::-webkit-scrollbar和::-webkit-scrollbar-track一起声明，否则在 macOS Chrome 等环境下易失效 - 推荐写法是
display: none，而非opacity: 0或visibility: hidden（后者不阻止点击区域，前者可能被忽略） - 如果只设
width: 0或height: 0，某些版本会留出空白占位，不如直接隐藏
完整最小可用块示例：
.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;
}
Firefox 下箭头为什么删不掉？
Firefox 不支持 ::-webkit-scrollbar-button，它的箭头是原生 UI 的一部分，无法通过 CSS 选择器单独移除。但实际中，只要用了 scrollbar-width: none，箭头就随整个滚动条一起消失 —— 这是 Firefox 唯一可靠的“隐藏箭头”方式。
-
scrollbar-width: none在 Firefox 中会彻底移除滚动条视觉组件，包括箭头、轨道、滑块 - 如果写了
scrollbar-color: transparent transparent却仍有箭头，说明scrollbar-width没生效，要检查是否父级有overflow: hidden截断了滚动上下文 - 别在
html或body标签上直接用scrollbar-width，Firefox 会忽略 → 必须作用于具体滚动容器（比如<div class="scroll-container">） <h3>移动端 Safari 和 iOS 的特殊限制</h3> <p>iOS Safari（16+）对 <code>::-webkit-scrollbar支持极弱，::-webkit-scrollbar-button完全无效，且scrollbar-width: none只对垂直滚动条起作用（水平方向仍可能露箭头）。此时唯一能做的，是放弃“精确控制箭头”，转而用更稳妥的组合：- 确保容器有明确
height或max-height，并设overflow-y: auto - 只依赖
scrollbar-width: none（iOS Safari 会识别并静默忽略不支持的部分） - 避免给容器加
transform、will-change或backface-visibility，这些可能触发渲染异常，让本该隐藏的箭头意外浮现
箭头问题本质是浏览器原生控件的残余表现，不是 CSS 能 100% 精确接管的区域。最稳的解法永远是：先确保滚动上下文存在，再用对应内核的“整条滚动条隐藏”指令，而不是试图抠掉某一个部件。
- 确保容器有明确
