仅用CSS为显示垂直滚动条的元素添加右侧内边距

可以通过CSS的:has()选择器结合滚动条伪元素实现，这是目前纯CSS方案里最可靠的方式，具体如下：

实现思路 #

利用:has()选择器检测滚动容器是否存在垂直滚动条（通过WebKit滚动条伪元素::-webkit-scrollbar），当滚动条可见时，为内部目标元素添加8px右侧内边距。当前主流浏览器（Chrome、Edge、Safari、Firefox 121+）都支持:has()选择器，能覆盖绝大多数场景。

代码示例 #

假设你的结构是滚动容器.scroll-container内部包含内容元素.content-item，布局为列flexbox：

/* 滚动容器基础样式 */
.scroll-container {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  max-height: 400px; /* 必须设置高度限制，否则不会触发滚动条 */
  scrollbar-width: thin; /* Firefox下统一滚动条宽度 */
}

/* 滚动条可见时，给内容元素加右侧内边距 */
.scroll-container:has(::-webkit-scrollbar) .content-item {
  padding-right: 8px;
}

/* 可选：统一滚动条样式，减少浏览器差异 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
  border-radius: 4px;
}

兼容性说明 #

• 若需兼容Firefox 121以下或更老的浏览器，纯CSS无法实现该需求，必须结合JavaScript（对比容器的scrollHeight和clientHeight，动态给内容元素添加类来设置内边距）。

关键注意点 #

• 滚动容器必须设置明确的高度限制（height或max-height），否则overflow-y: auto不会生效，也不会出现滚动条。
• 滚动条宽度建议和内边距值匹配，避免内容偏移破坏布局对称性。

内容的提问来源于stack exchange，提问作者Amaranthus