滚动条轨道两端留白指通过padding+overflow:hidden双层结构在视觉上使轨道不贴边，而非滚动条原生支持的属性；最稳方案是外层容器overflow:hidden裁剪，内层设padding并启用overflow:auto。
滚动条轨道两端留白是什么意思
指的是当页面或容器启用滚动时，scrollbar-track（滚动条轨道）在垂直/水平方向的起始和结束位置各空出一段距离，不紧贴容器边缘。这不是浏览器默认行为，原生滚动条本身没有“轨道留白”属性，所谓“两端留白”实际是通过遮罩、padding、伪元素或外层容器控制视觉呈现来模拟的。
用 padding + overflow: hidden 最稳的方案
直接在可滚动容器内部加 padding，再用外层容器裁剪掉溢出部分，是最兼容、最可控的方式。关键在于两层结构：外层隐藏滚动条并限制可视区域，内层提供 padding 和真实滚动内容。
- 外层容器设
overflow: hidden，高度/宽度固定，不显示滚动条 - 内层容器设
padding-top和padding-bottom（垂直场景）或padding-left/padding-right（水平），同时设overflow-y: auto或overflow-x: auto - 内层内容需足够长才能触发滚动，否则 padding 会直接表现为顶部/底部空白
- 注意：若内层用了
box-sizing: border-box，padding 会压缩内容区，不影响滚动高度计算；但默认content-box下，padding 会额外增加总高度，需确认是否符合预期
<div class="scroll-container">
<div class="scroll-content">
<p>内容行 1</p>
<p>内容行 2</p>
<!-- 更多内容 -->
</div>
</div>.scroll-container {
height: 300px;
overflow: hidden;
}
.scroll-content {
padding: 20px 0;
overflow-y: auto;
height: 100%;
}用 ::-webkit-scrollbar-track 伪元素强行偏移（仅 Chrome/Edge/Safari）
Webkit 内核支持自定义滚动条样式，但 ::-webkit-scrollbar-track 本身不能设置 margin 或位移，只能靠 background 渐变或背景图“假装”有留白。这种方式纯属视觉欺骗，且无法真正阻止滚动到顶/底时内容贴边。
- 例如用线性渐变在轨道两端画透明带：
background: linear-gradient(to bottom, transparent 20px, #e0e0e0 20px, #e0e0e0 calc(100% - 20px), transparent calc(100% - 20px)); - 该方法不改变滚动行为，只改轨道外观；移动端 Safari 对此支持不稳定
- Firefox 和旧版 Edge 完全不识别，属于“锦上添花，不可依赖”
为什么不要用 margin 或 transform 移动滚动条本身
有人尝试给 ::-webkit-scrollbar 加 margin 或用 transform: translateY() 偏移，结果发现无效——因为滚动条是浏览器 UI 层绘制的，不是普通 DOM 元素，CSS 的盒模型属性对它多数不起作用。
立即学习“前端免费学习笔记（深入）”；
-
margin、padding、position、transform在绝大多数浏览器中对::-webkit-scrollbar伪元素无效 - 极个别版本 Chromium 曾短暂支持
transform，但很快被回退，不能作为实现依据 - 试图用 JS 监听 scroll 并动态调整内容位置来“模拟留白”，会导致滚动卡顿、惯性丢失、触摸设备体验差
真正要留白，就得从容器结构和内容布局入手，而不是跟滚动条本身较劲。
