滚动容器中padding-right“看不见”是因滚动条占用空间且不参与scrollwidth计算，导致留白被压在滚动条内侧；最稳妥解法是用外层wrapper设padding、内层content负责滚动。
滚动容器里 padding-right 看不见？不是没生效，是被滚动条吃了
当容器设置了 overflow-x: auto 或 overflow: scroll，又加了 padding-right，但右边始终贴边、留白消失——问题不在 CSS 写错，而是浏览器把滚动条宽度算进了内容区，padding-right 被压在滚动条内侧，用户根本拉不到那个位置。
典型现象：div { width: 300px; padding: 20px; overflow-x: auto; }，内部子元素明明有 padding-right: 20px，横向滚动到底时，最后 20px 依然紧贴容器右边缘。
- 滚动条默认占据空间（桌面端约 12–17px），它和
padding-right共享同一侧，但不参与盒模型的“可滚动范围”计算 -
padding-right仍会渲染背景色、影响背景图定位，但它不撑开scrollWidth，所以滚动锚点停不到那里 - 移动端 Safari 和 Chrome 的滚动条宽度不一致，硬写
padding-right: 15px在不同设备上会错位
最稳的解法：套一层 wrapper，把 padding 移到外层
不依赖滚动条宽度猜测，也不改滚动逻辑，直接绕过问题源头。核心思路是让 padding 所在的元素本身不滚动，只让内层内容滚动。
示例结构：
<div class="scroll-wrapper" style="width: 300px; padding-right: 20px;">
<div class="scroll-content" style="overflow-x: auto; white-space: nowrap;">
<span>item1</span><span>item2</span><span>item3</span>
</div>
</div>
-
.scroll-wrapper负责提供视觉留白（padding-right），它不设overflow，所以 padding 完全生效 -
.scroll-content负责滚动，宽度由内容撑开，scrollWidth不再受外层 padding 干扰 - 此法兼容所有浏览器，包括 iOS Safari 和旧版 Android WebView
如果必须单层结构，用 calc() 补偿滚动条宽度
仅限已知滚动条宽度且能接受轻微兼容风险的场景（如 Electron、内部管理后台）。需手动测量或约定宽度。
常见做法：
.scrollable {
width: 300px;
padding-right: 20px;
overflow-x: auto;
/* 滚动条占 16px，所以内容需额外多出 16px 空间 */
padding-bottom: 0; /* 防止纵向滚动干扰 */
}
.scrollable::after {
content: "";
display: inline-block;
width: calc(20px + 16px); /* padding-right + 滚动条宽 */
height: 1px;
visibility: hidden;
}
- 不能用
margin-right替代，它不参与scrollWidth计算 -
::after伪元素必须是inline-block或inline，才能被 flex / nowrap 行内布局识别为“内容的一部分” - 滚动条宽度建议通过 JS 动态读取：
document.documentElement.offsetWidth - document.body.offsetWidth，再注入 CSS 变量
uni-app 或小程序里别碰 padding-right
<scroll-view scroll-x="true"></scroll-view> 是自定义滚动容器，它的内部尺寸计算不遵循标准盒模型。padding-right 在多数版本中会被忽略，尤其在 iOS 端。
- 改用
margin-right加在最后一个子元素上（如<view class="item" style="margin-right: 20rpx"></view>） - 或在子元素外再包一层
<view style="padding-right: 20rpx"><scroll-view>...</scroll-view></view> - 避免在
scroll-view上同时设flex: 1和padding-right，容易触发尺寸重算冲突
真正难处理的不是怎么加 padding，而是怎么让浏览器承认“这块空白值得滚过去”。wrapper 套法看似多了一层 DOM，却是目前唯一不依赖运行时探测、不引入 JS、不牺牲可访问性的通用解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
