如何实现滚动条平滑渐变过渡？复刻macOS滚动条过渡失效问题

你的问题核心是transition属性没作用到滚动条thumb元素上——webkit的滚动条伪元素（比如::-webkit-scrollbar-thumb）是浏览器原生的独立控件，不会继承普通元素（比如全局*）的transition规则，所以之前的过渡设置完全没生效。

修改后的代码（生效版） #

* {
  scrollbar-gutter: stable;
  
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 8px;
    /* 关键：把过渡直接声明在thumb伪元素上 */
    transition: background-color 0.3s ease-in-out;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-button {
    display: none;
  }

  /* 非webkit浏览器兼容（注意：scrollbar-color不支持过渡） */
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-color: rgba(0,0,0,0) transparent;
    scrollbar-width: thin;
  }

  &[data-scrollbar-thumb="false"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0);
  }
  
  &[data-scrollbar-thumb="true"]::-webkit-scrollbar-thumb {
    /* 换成更贴近macOS原生的灰色透明度 */
    background-color: rgba(117, 117, 117, 0.7);
  }
}

关键说明 #

1. 过渡规则必须直接绑定到thumb：webkit滚动条伪元素不继承父元素的transition，所以必须在::-webkit-scrollbar-thumb里单独声明过渡属性。
2. 贴近原生macOS的优化：你可以把颜色换成rgba(117,117,117,0.7)，这更接近macOS默认滚动条的灰色；同时可以把过渡时长调整到0.3s，更贴合原生的流畅感。
3. 非webkit浏览器限制：Firefox等非webkit浏览器的scrollbar-color属性不支持过渡效果，这是浏览器API的固有限制，无法通过CSS解决。

额外的原生交互模拟 #

如果要实现macOS那种“滚动/hover时显示，静止时隐藏”的效果，不需要手动切换data属性，直接用:hover伪类就能实现：

/* 替换原来的data属性规则 */
&:hover::-webkit-scrollbar-thumb {
  background-color: rgba(117, 117, 117, 0.7);
}

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