WebKit环境下如何仅用CSS实现滚动条thumb背景色加载渐变效果

需求回顾 #

• 页面加载后，滚动条thumb的背景色从transparent平滑过渡到#333
• 不可修改overflow属性（从hidden切换到auto）来实现动画
• 完全禁止使用JavaScript、框架及类库

已验证的Gecko内核方案（Firefox/Waterfox/Pale Moon） #

以下代码已完美适配Gecko内核浏览器，利用标准的scrollbar-color属性实现动画：

@keyframes intro_scrollbars_standard {
  from { scrollbar-color: transparent transparent; }
  to { scrollbar-color: #333 #000; }
}

* {
  animation-delay: 200ms;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: intro_scrollbars_standard;
  scrollbar-color: transparent transparent;
}

WebKit内核适配方案（Chrome/Safari等） #

直接为::-webkit-scrollbar-thumb添加动画存在兼容性限制，可通过CSS自定义属性+过渡的方式实现需求：

/* 定义全局自定义属性并添加动画 */
:root {
  --scrollbar-thumb-bg: transparent;
  animation: intro_scrollbars_webkit 1s 200ms forwards;
}

@keyframes intro_scrollbars_webkit {
  to {
    --scrollbar-thumb-bg: #333;
  }
}

/* 滚动条样式定义，利用过渡实现平滑变化 */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
  background-color: var(--scrollbar-thumb-bg);
  transition: background-color 1s ease-out;
}

/* 可选：统一滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #000;
}

方案说明 #

WebKit内核对滚动条伪元素的直接动画支持有限，通过将动画绑定到全局自定义属性，再让滚动条thumb读取该属性并设置过渡，就能间接实现背景色的平滑渐变效果，完全符合纯CSS的限制要求。

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