如何为scrollbar-track添加非inset效果的box-shadow属性？

问题：给webkit滚动条轨道（scrollbar-track）设置box-shadow时，普通外部阴影完全不生效，只有添加inset属性才会显示，但我不需要内阴影效果。

我的样式代码：

.scroll-box {
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}
.scroll-box::-webkit-scrollbar {
    width: 10px;
 }
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #7d7d7d;
  border: 2px solid transparent;
  background-clip: content-box;
 }
.scroll-box::-webkit-scrollbar-track {
  border: 1px solid red;
  box-shadow: -4px 0 20px #000; /* 这个外部阴影不生效 */
}

HTML代码：

<div class="scroll-box">
  .............omit
</div>

预期效果：滚动条轨道左侧有向外延伸的黑色阴影。

解决方法 #

webkit内核中，scrollbar-track的渲染范围被限制在滚动条宽度内，外部box-shadow会被浏览器裁剪掉，只有inset阴影能在轨道内部显示。可以通过以下两种方式实现预期的外部阴影效果：

方法1：给容器添加内阴影模拟

调整容器的内边距，然后用容器的inset阴影来模拟滚动轨道的外部阴影：

.scroll-box {
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
  padding-right: 10px; /* 数值等于滚动条宽度 */
  box-shadow: inset -14px 0 20px -4px #000; /* 调整参数让阴影刚好覆盖滚动轨道区域 */
}
.scroll-box::-webkit-scrollbar {
  width: 10px;
}
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #7d7d7d;
  border: 2px solid transparent;
  background-clip: content-box;
}
.scroll-box::-webkit-scrollbar-track {
  border: 1px solid red;
  /* 移除原来的box-shadow */
}

方法2：用伪元素模拟阴影

给滚动容器添加相对定位，通过伪元素生成一个和滚动轨道同宽同高的元素，设置外部阴影并放在滚动条后方：

.scroll-box {
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
  position: relative;
}
.scroll-box::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px; /* 数值等于滚动条宽度 */
  box-shadow: -4px 0 20px #000;
  pointer-events: none; /* 避免干扰滚动交互 */
  z-index: -1; /* 让伪元素在滚动条下方 */
}
.scroll-box::-webkit-scrollbar {
  width: 10px;
}
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #7d7d7d;
  border: 2px solid transparent;
  background-clip: content-box;
}
.scroll-box::-webkit-scrollbar-track {
  border: 1px solid red;
}

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