如何让scrollbar thumb始终保持在scrollbox边框内部

问题根因 #

• 为#scroll设置的不规则斜角圆角边框，默认overflow: scroll的裁剪边界是元素的矩形外框，不会跟随自定义圆角形状裁剪内容，因此滚动条滑块会超出圆角斜角区域外露
• 调整z-index无效是因为Webkit内核的自定义滚动条是滚动容器的内置渲染部分，和容器本身处于同一个层叠上下文，z-index无法改变它和容器边框的遮挡关系
• 现有代码重复定义了overflow属性，虽然不影响核心功能，但属于不规范写法，建议合并

修复方案 #

仅需修改#scroll的样式即可解决问题，后续替换滑块为自定义图片也不会受影响：

• 合并重复的overflow声明，拆分横向、纵向滚动规则更清晰
• 适当加大右侧内边距，避免滚动条紧贴边框
• 添加isolation: isolate为滚动容器创建独立层叠上下文
• 添加clip-path属性，使用和边框完全一致的圆角值裁剪所有超出形状的内容（包括滚动条滑块、轨道），从根本上杜绝溢出

修改后的#scroll核心样式代码：

#scroll {
  opacity: 0;
  position: absolute;
  margin-left: 4%;
  width: 250px;
  top: 140px;
  border: 1px solid black;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 10px;
  /* 加大右侧内边距，给滚动条预留空间 */
  padding-right: 16px;
  height: 110px;
  /* 合并overflow声明 */
  overflow-y: scroll;
  overflow-x: hidden;
  background: #FFFFFF90;
  transition: opacity .35s ease;
  font-size: 14px;
  font-family: wow;
  color: #000;
  text-align: center;
  /* 新增：创建独立层叠上下文 */
  isolation: isolate;
  /* 新增：按边框形状裁剪所有溢出内容 */
  clip-path: inset(0 round 255px 15px 225px 15px/15px 225px 15px 255px);
}

后续自定义滑块图片注意点 #

替换滑块为自定义图片时，直接给::-webkit-scrollbar-thumb设置background-image即可，配合background-size: 100% 100%适配尺寸，不要给滑块设置超过滚动条宽度的数值，配合现有clip-path裁剪规则，图片不会出现溢出问题。

注：该方案兼容所有支持Webkit自定义滚动条的浏览器（Chrome、Edge、Safari等），和你现有实现的适配范围完全一致，没有额外兼容问题。

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