滚动条两端空白由浏览器对scrollbar轨道容器的默认渲染行为决定，主要表现为为滑块预留拖动空间而产生的隐式padding，可通过::-webkit-scrollbar-track重置padding:0解决webkit浏览器问题，firefox则需用clip-path或负margin等绕行方案。
滚动条两端空白由什么决定
滚动条两端（左/右或上/下）出现的空白，不是滚动条本身“画出来”的，而是浏览器对 scrollbar 轨道容器（track）的默认渲染行为：它会为 thumb（滑块）预留可拖动空间，并在 track 两端留出 padding 或 margin 类似的视觉间隙。这个间隙不可见但真实存在，尤其在自定义滚动条（::-webkit-scrollbar-track）时容易暴露——比如你设了 background: #eee，就会发现 track 左右各空出几像素。
用 ::-webkit-scrollbar-track 消除两端 padding
Chrome / Edge / Safari 中，该伪元素默认带隐式内边距。直接重置即可：
.my-container::-webkit-scrollbar-track {
padding: 0;
margin: 0;
border: none;
}
注意两点：
-
padding必须显式设为0，仅靠border: none不够 - 若同时用了
border-radius，需确保border-radius值 ≤ track 宽度/高度的一半，否则圆角会“吃掉”两端，反而放大空白感
Firefox 中无对应伪类，需靠容器裁剪
Firefox 不支持 ::-moz-scrollbar-track 等样式，也无法直接控制 track 两端间隙。可行做法是：
- 给滚动容器（如
.my-container）设overflow: overlay（仅部分新版 Firefox 支持，慎用） - 更稳的方式：用
clip-path裁掉两端多余区域，例如：clip-path: inset(0 4px 0 4px)（左右各裁 4px） - 或用负
margin微调：对.my-container设margin-left: -2px; margin-right: -2px;，再配合overflow-x: scroll强制显示
避免因 box-sizing 导致的宽度计算偏差
如果滚动容器设置了 width: 100% 且父级有 padding，而自身未设 box-sizing: border-box，那实际内容宽度会超出预期，导致滚动条被“挤”向一侧，视觉上像一端空白变大。务必确认：
- 滚动容器使用
box-sizing: border-box - 其父级 padding 不参与子元素 100% 宽度计算（否则需改用
calc(100% - Xpx)） - 不要在滚动容器上同时设
padding和width: 100%，除非明确需要内边距
真正难处理的是跨浏览器一致性——WebKit 可调 track，Firefox 只能绕；而两端空白又常和字体度量、缩放比例耦合，微调时建议用 devtools 实时拖动 padding 值观察，比猜数值可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
