使用background-clip:padding-box时如何避免滚动条与内容间的缝隙

1. 你给.scroll容器设置了background-clip: padding-box，而::-webkit-scrollbar、::-webkit-scrollbar-corner这类滚动条相关伪元素会默认继承父容器的background-clip属性，导致滚动条本身的绿色背景也被裁剪掉了边缘1px的范围，这部分被裁剪的区域直接透出底层body的黄色背景，就是你看到的滚动条和内容之间的1px缝隙。
2. 底部的1px缝隙同理，是::-webkit-scrollbar-corner的背景被padding-box规则裁剪导致的，你单独给这个伪元素设置背景色不会生效，因为背景本身被裁掉了对应区域。

不需要新增额外容器，也不需要改动现有业务逻辑（包括你用到的border-image、background-clip: padding-box规则都可以保留），只需要给滚动条相关伪元素单独覆盖background-clip属性即可：

::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  background-color: green;
  /* 新增这行，覆盖继承的padding-box规则 */
  background-clip: border-box;
}

::-webkit-scrollbar-corner {
  background: green;
  /* 新增这行，覆盖继承的padding-box规则 */
  background-clip: border-box;
}

这个改动完全适配Chromium内核浏览器，不会影响其他逻辑。

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