CSS实现自定义webkit滚动条时轨道边角效果不符合预期求助

要让滚动条轨道的border-radius生效，按以下要求修改代码即可：

• 需先显式声明::-webkit-scrollbar的基础尺寸，这是webkit内核自定义滚动条样式生效的前置条件
• 给::-webkit-scrollbar-track-piece添加border-radius的同时，补充overflow: hidden属性，避免圆角被裁切失效
• 如需滑块同步适配圆角，可给::-webkit-scrollbar-thumb添加对应border-radius属性

修正后的完整代码：

/* 定义滚动条基础尺寸 */
::-webkit-scrollbar {
  width: 9px; /* 与你的滑块背景图宽度匹配 */
}

::-webkit-scrollbar-thumb {
  background: url("/assets/scrollbar.png") no-repeat;
  background-size: 9px 150px;
  /* 如需滑块带圆角可取消注释下方代码，数值和轨道圆角保持一致即可 */
  /* border-radius: 0 5px 5px 0; */
}

::-webkit-scrollbar-track-piece {
  background: grey;
  /* 设置右上角、右下角圆角 */
  border-radius: 0 5px 5px 0;
  overflow: hidden;
}

补充说明：

• 以上样式仅适配webkit内核浏览器（Chrome、Edge、Safari等），Firefox需单独使用scrollbar-color、scrollbar-width属性实现自定义滚动条效果。

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