默认滚动条会占用容器宽高导致内容压缩，最稳定方案是用scrollbar-gutter: stable both预留位置；Safari等不支持时降级为padding-right配合overflow-y: scroll，并响应式适配触屏设备。
滚动条挤占容器宽度，内容被压缩怎么办
直接结论：默认滚动条会占用 width 或 height，导致内容区变窄——这不是 bug，是规范行为。解决方向只有两个：要么让滚动条不占空间（overlay），要么提前给它留出位置（padding）。
但注意：overlay 在不同浏览器支持差异大，且不能完全靠 CSS 控制；而预留 padding 看似笨拙，反而是最稳定、可预测的方案。
Chrome/Firefox 中用 scrollbar-gutter 预留滚动条位置
scrollbar-gutter 是目前最干净的“预留位”方案，它专为解决挤压问题设计，不会影响布局流，也不依赖 JS。
- 只在需要时预留（比如容器有滚动内容才显示滚动条），比固定
padding-right更智能 - 支持
stable（始终预留）和auto（仅当滚动条可能显示时预留），推荐用scrollbar-gutter: stable both; - Firefox 104+、Chrome 94+ 支持，Safari 尚未支持（截至 Safari 17.5）
- 不兼容时会自动降级为无预留，需配合备用方案（如后面提到的
padding）
示例：
立即学习“前端免费学习笔记（深入）”；
.scroll-container {
overflow-y: auto;
scrollbar-gutter: stable both;
}
Safari 和老版本 Chrome 里用 padding + overflow 模拟稳定宽度
Safari 不支持 scrollbar-gutter，且其滚动条默认就是 overlay 类型（不占空间），但行为不稳定：缩放、系统设置变更时可能突然出现并挤压内容。所以更稳妥的做法是手动预留。
- 先测出当前系统滚动条宽度（通常
12px～17px），用padding-right: 16px占位 - 必须同时设
overflow-y: scroll（不是auto），否则 Safari 可能不渲染滚动条，导致 padding 白占空间 - 若容器高度受限，记得把
padding加进box-sizing: border-box计算中，避免意外溢出 - 响应式场景下，建议用
@media (hover: hover)区分触屏/非触屏设备，触屏设备可取消 padding（因为通常无永久滚动条）
示例：
立即学习“前端免费学习笔记（深入）”；
.scroll-container {
overflow-y: scroll;
padding-right: 16px;
box-sizing: border-box;
}
@media (hover: none) {
.scroll-container {
padding-right: 0;
}
}
别碰 ::-webkit-scrollbar 的 width 来“隐藏”滚动条
有人试过把 ::-webkit-scrollbar 的 width 设为 0 或 transparent，以为能“去掉”滚动条又不占位——这行不通。
-
width: 0会让滚动条不可见，但依然参与布局计算，内容照样被挤 -
opacity: 0或visibility: hidden同样无效，滚动条 DOM 节点还在，占位逻辑照常执行 - 真正想隐藏滚动条又保留滚动能力，得用
overflow: overlay（已废弃）或现代替代方案（如scrollbar-width: none+overflow: auto），但这些都不解决“占位”问题
一句话：想治挤压，就得从“空间分配”入手，而不是试图让滚动条“假装不存在”。
最易被忽略的一点：滚动条宽度不是固定值。Windows 下可能随 DPI 缩放变化，macOS 下随系统偏好设置浮动，甚至同一个页面在不同 zoom 级别下表现不同。所以硬写 padding-right: 16px 虽然常用，但不是银弹；scrollbar-gutter 才是未来解法，只是现在得兜底。
