CSS垂直滚动条（VScrollbar）阴影卡顿：原因与解决方法

给div元素的垂直滚动条滑块（thumb）添加box-shadow后，滚动时阴影出现卡顿异常：阴影仿佛撞到“无形墙”被截断，且这种“墙”的数量会随元素高度增加而增多；但水平滚动条无此问题。

示例代码如下：

<div style="overflow-Y: scroll; overflow-X: hidden; width:80vw; height:60vh; border:3px solid black; left:10vw; top:10vh;">
  <div style="height: 1400vh; width: 1000vw; background:blue;">
  </div>
</div>
<style>
  div::-webkit-scrollbar {
    width: 20px;
    height: 100px;
  }
  ::-webkit-scrollbar-track {
    background: red;
  }
  ::-webkit-scrollbar-thumb {
    background: goldenrod;
    -webkit-box-shadow: 0px 0px 20px 10px green;
  }
</style>

这是WebKit内核浏览器的渲染优化机制导致的：

• 垂直滚动时，浏览器为了提升性能，会将滚动轨道分割成多个与视口高度匹配的分段渲染区域；
• 滑块的box-shadow属于滑块元素的外部视觉效果，当滑块移动到这些分段区域的边界时，阴影会被区域边缘强制截断，就出现了“撞墙”的视觉表现；
• 水平滚动轨道采用整段渲染的方式，不存在分段边界，因此不会出现阴影截断问题。

推荐以下几种可行的修复方式：

方法1：用伪元素模拟外部阴影（视觉效果最接近原需求） #

通过给滑块添加伪元素来实现阴影，伪元素不受轨道分段渲染的限制：

<div style="overflow-Y: scroll; overflow-X: hidden; width:80vw; height:60vh; border:3px solid black; left:10vw; top:10vh;">
  <div style="height: 1400vh; width: 1000vw; background:blue;">
  </div>
</div>
<style>
  div::-webkit-scrollbar {
    width: 20px;
    height: 100px;
  }
  ::-webkit-scrollbar-track {
    background: red;
    /* 给轨道留足够空间展示伪元素阴影 */
    padding: 20px 0;
  }
  ::-webkit-scrollbar-thumb {
    background: goldenrod;
    position: relative;
    /* 去掉原box-shadow */
  }
  ::-webkit-scrollbar-thumb::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: green;
    border-radius: inherit;
    filter: blur(10px);
    z-index: -1;
  }
</style>

方法2：改用内阴影（简单但视觉效果不同） #

如果可以接受内阴影的视觉表现，直接将box-shadow改为内阴影，内阴影属于滑块内部区域，不会被轨道分段截断：

::-webkit-scrollbar-thumb {
  background: goldenrod;
  -webkit-box-shadow: inset 0px 0px 20px 10px green;
}

方法3：扩大滚动轨道的渲染空间 #

给滚动轨道添加上下padding，让轨道的分段渲染区域足够大，容纳滑块的阴影：

::-webkit-scrollbar-track {
  background: red;
  padding: 20px 0; /* 值大于阴影的扩散半径 */
}

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