如何为自定义webkit滚动条添加宽度变化的平滑过渡动画？

首先明确：可行，但需要注意webkit滚动条伪元素的过渡写法，以及悬停触发的目标选择，避免交互体验问题。

结合你的需求，下面是具体实现代码：

/* 示例：给带滚动条的容器（比如body）设置基础样式，确保有滚动内容 */
body {
  height: 200vh;
}

/* 基础滚动条样式 */
::-webkit-scrollbar {
  width: 12px;
  /* 添加宽度过渡动画，时长和缓动可按需调整 */
  transition: width 0.3s ease;
}

/* 悬停容器时修改滚动条宽度（避免直接hover滚动条导致窄条难以触发的问题） */
body:hover::-webkit-scrollbar {
  width: 1px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: linear-gradient(transparent, #00ffff);
  /* 可选：给滑块背景也加过渡，优化视觉流畅度 */
  transition: background 0.3s ease;
}

/* 可选：滑块悬停增强效果 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(transparent, #00ccff);
}

关键注意点： #

• 不要直接给::-webkit-scrollbar:hover设置宽度，否则滚动条变窄后会难以再次触发hover，体验糟糕。建议给滚动条所在的父容器（比如body、自定义滚动容器）设置hover来控制宽度变化。
• 过渡动画的参数（如0.3s ease）可自行调整，0.3s是动画时长，ease是缓动曲线，换成linear能实现匀速过渡。
• 该写法仅支持webkit内核浏览器（Chrome、Edge、Safari等），Firefox和IE的滚动条自定义逻辑不同，若需兼容可额外针对性处理，但webkit是当前主流场景的核心适配对象。

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