加了 ::webkit-scrollbar 后内容宽度变小或出现横向滚动条，根本原因是浏览器仍为滚动条预留空间并计入 padding-right，尤其 overflow-y: scroll 时该预留位真实占用布局空间。
自定义滚动条样式本身不会改变盒模型，但 ::webkit-scrollbar 相关规则若误写在 body 或容器上，或与 overflow、padding、box-sizing 混用，就可能让内容区域“被挤出”或触发意外重排。
为什么加了 ::webkit-scrollbar 后内容宽度变小或出现横向滚动条？
根本原因是：浏览器在渲染自定义滚动条时，仍会为滚动条保留原始空间（即使你用 width: 0 隐藏），而该空间默认计入父容器的 padding-right（对垂直滚动条而言）。尤其当父容器设了 overflow-y: scroll（强制显示滚动条）时，这个“预留位”就会真实占用布局空间。
- 常见错误写法：
div { overflow-y: scroll; } div::-webkit-scrollbar { width: 4px; }→ 滚动条占 4px，但没补偿内边距 - 更隐蔽的问题：父容器用了
box-sizing: border-box但未将滚动条宽度从padding中扣除 - 移动端 Safari 完全忽略
::webkit-scrollbar，所以该问题只在 Chromium/Edge 等内核中暴露
如何安全地覆盖滚动条而不扰动布局？
核心思路是：把滚动条“视觉上隐藏”，同时确保它不参与盒模型计算。不能靠 display: none（伪元素不支持），也不能靠 opacity: 0（仍占空间）。
- 用
width: 0 !important+height: 0 !important彻底移除尺寸（适用于垂直/水平滚动条） - 配合
background: transparent和border: none消除残留渲染痕迹 - 关键补丁：给滚动容器加
padding-right: 0（垂直滚动）或padding-bottom: 0（水平滚动），并确保其box-sizing为border-box - 避免对
html或body直接设::-webkit-scrollbar，优先作用于具体容器（如.scrollable）
示例：
立即学习“前端免费学习笔记（深入）”；
.scrollable {
overflow-y: auto;
box-sizing: border-box;
padding-right: 0; /* 显式清空滚动条预留位 */
}
.scrollable::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
background: transparent;
}
.scrollable::-webkit-scrollbar-track {
background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
background: transparent;
}哪些场景下必须放弃自定义滚动条？
不是所有情况都适合硬上 ::-webkit-scrollbar。以下情形建议退回到原生行为：
- 容器宽度由
flex或grid动态分配，且子项含min-width—— 此时滚动条宽度扰动会直接破坏弹性计算 - 使用了
contain: layout或content-visibility: auto的长列表，自定义滚动条可能干扰渲染隔离边界 - 需要严格适配 Windows 高对比度模式（
@media (forced-colors: active)），此时自定义样式会被强制禁用，反而导致布局跳变
最易被忽略的一点：Chrome 125+ 开始对 ::-webkit-scrollbar 的 CSS 属性支持进一步收紧，transform、filter、clip-path 均失效；如果依赖这些做“伪隐藏”，现在会直接回退到默认滚动条并撑开布局。
