现代浏览器默认隐藏滚动条按钮，::-webkit-scrollbar-button 和 ::-moz-scrollbar-button 已失效；唯一可靠方案是用自定义按钮+js控制scrolltop实现滚动。
Chrome/Firefox 中 ::-webkit-scrollbar-button 不起作用的原因
现代浏览器（尤其是 Chrome 90+ 和 Firefox）默认隐藏滚动条两端的上下/左右箭头按钮，::-webkit-scrollbar-button 仅在启用传统滚动条按钮时才生效——但这个行为早已被废弃。你写了一堆 ::-webkit-scrollbar-button 样式却看不到效果，不是代码写错了，而是浏览器根本不渲染这些按钮。
常见错误现象：::-webkit-scrollbar-button 完全无反应；display: block 或 visibility: visible 无效；开发者工具里找不到对应伪元素节点。
- Chrome 从 v86 起默认禁用滚动条按钮，
scrollbar-width: auto（Firefox）或-webkit-appearance: none均无法强制唤出按钮 - Firefox 自 v79 起彻底移除对
::-moz-scrollbar-button的支持，该伪元素已无效 - 即使通过
overflow: scroll+height强制出现原生滚动条，按钮仍不可见、不可点击、不可样式化
真正可控的方案：用自定义按钮 + scrollTop 手动滚动
想实现带样式的上下箭头，唯一可靠路径是放弃原生按钮，用两个 <button></button> 模拟，并通过 JS 控制容器的 scrollTop。这不是“覆盖样式”，而是替换交互层。
使用场景：侧边导航栏、固定高度日志面板、聊天消息流等需要精确控制滚动位置且 UI 风格统一的区域。
- 给目标容器设
id="log-pane"，并确保它有明确的height和overflow-y: auto - 在容器外或内部绝对定位两个按钮，分别绑定
click事件 - 每次点击向上箭头：执行
el.scrollTop -= 40；向下箭头：执行el.scrollTop += 40 - 为防滚动越界，加判断：
el.scrollTop = Math.max(0, Math.min(el.scrollHeight - el.clientHeight, el.scrollTop))
<div id="log-pane" style="height: 300px; overflow-y: auto;"> <div>...大量内容...</div> </div> <button id="scroll-up" class="scroll-btn up">▲</button> <button id="scroll-down" class="scroll-btn down">▼</button>
scrollTop 步长选 40 还是 clientHeight / 10？
硬编码步长（如 40px）简单直接，但响应式布局下容易失配；动态计算更健壮，但要注意 DOM 尺寸读取时机。
性能影响：频繁读取 clientHeight 或 scrollHeight 触发回流，若按钮高频点击（如按住不放），建议缓存尺寸值或使用 getBoundingClientRect() 避免重复计算。
- 静态步长适合固定高度容器，例如
height: 200px的卡片，设step = 24即可匹配行高 - 动态步长推荐：
const step = Math.floor(el.clientHeight * 0.1)，保证每次滚动约 10% 可视区高度 - 避免用
scrollBy({ top: X, behavior: 'smooth' })实现动画——它会和用户手动拖拽冲突，导致滚动卡顿或跳变
Firefox 下 overflow: overlay 导致自定义按钮错位
Firefox 使用 overflow: overlay（默认值）时，滚动条不占布局空间，但容器内元素的 getBoundingClientRect() 位置不受影响；而你的自定义按钮若用绝对定位参照容器右下角，就会被滚动条遮挡或偏移。
兼容性处理：统一设 overflow: auto，再用 padding-right 补出滚动条宽度（约 16px），确保按钮始终在可视区域内。
- 检测滚动条宽度的最小可靠方式：
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth - 不要依赖
document.body.offsetWidth - document.body.clientWidth，body 可能有 margin 干扰 - 若必须保留 overlay 行为，按钮应脱离容器定位（如用
position: fixed+ 计算视口坐标），但维护成本陡增
实际项目里，多数人卡在“以为能样式化原生按钮”这一步。真要加箭头，就得接受用 JS 接管滚动逻辑——不是所有 CSS 伪元素都还活着，尤其当它们连 DOM 节点都不生成的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
