自定义带动态右侧边距与圆角的滚动条：右侧圆角截断如何修复？

一、自定义滚动条、动态右侧边距与圆角的实现 #

1. 自定义滚动条 #

你当前的代码已经实现了WebKit内核的滚动条基础自定义，还可以扩展更多样式，同时兼顾其他浏览器兼容：

/* WebKit滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* WebKit滚动条滑块 */
::-webkit-scrollbar-thumb {
  width: 7px;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Firefox/Edge 兼容 */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) #f1f1f1;
}

2. 动态右侧边距 #

可以通过CSS变量结合JS动态修改，或者用媒体查询做响应式调整：

• CSS变量+JS动态控制：

.scroll-container {
  padding-right: var(--right-padding, 10px); /* 默认10px */
}

// 示例：根据需求修改右侧边距
document.querySelector('.scroll-container').style.setProperty('--right-padding', '20px');

• 响应式动态边距：

@media (min-width: 768px) {
  .scroll-container {
    padding-right: 15px;
  }
}

3. 容器圆角 #

直接给.scroll-container添加border-radius即可，注意配合overflow: hidden确保圆角生效：

.scroll-container {
  border-radius: 8px;
  overflow: hidden;
}

二、修复border-right导致右侧圆角截断的问题 #

用border-right替代全边框时，右侧圆角截断的核心原因是：容器的overflow会裁剪超出border-box的内容，而仅设置右侧边框时，内容或滚动条会挤压圆角区域，导致圆角被截断。

推荐两种修复方案：

方案1：添加右侧内边距+background-clip #

给容器留出右侧空间，避免内容/滚动条占用圆角区域，同时限制背景不延伸到边框：

.scroll-container {
  border-right: 2px solid #ddd;
  border-radius: 8px;
  padding-right: 10px; /* 留出空间给圆角 */
  background-clip: padding-box;
}

方案2：伪元素模拟右侧边框 #

用绝对定位的伪元素实现右侧边框，完全不影响容器圆角：

.scroll-container {
  position: relative;
  border-radius: 8px;
  padding-right: 10px; /* 给伪元素留出空间 */
}

.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #ddd;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: -1; /* 避免遮挡内容和滚动条 */
}

如果是滚动条挤压导致的圆角截断，还可以调整容器padding适配滚动条宽度：

.scroll-container {
  padding-right: calc(7px + 5px); /* 滚动条宽度 + 额外间隔 */
  border-right: 2px solid #ddd;
  border-radius: 8px;
}

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