自定义Web滚动条hover时背景渐变无法添加过渡效果的求助

CSS过渡无法直接在两个线性渐变背景之间生效，因为线性渐变属于背景图像类型，而非可过渡的单一颜色值，所以你原代码中针对background属性的过渡不会起作用。

以下是可行的解决方案，通过双重背景+背景位置过渡实现平滑切换：

::-webkit-scrollbar{
    width: 12px;
}
::-webkit-scrollbar-track{
    background: #1b1b1b;
}
::-webkit-scrollbar-thumb{
    /* 同时嵌入默认和hover状态的渐变背景，上下排列 */
    background: linear-gradient(#757575,#2e2e2e), linear-gradient(#2e2e2e,#1b1b1b);
    /* 设置背景尺寸，让两个渐变各占一半高度 */
    background-size: 100% 200%;
    /* 默认显示下方的渐变（初始状态） */
    background-position: 0 100%;
    border-radius: 6px;
    /* 过渡背景位置属性，实现平滑切换 */
    transition: background-position 0.5s ease;
}
::-webkit-scrollbar-thumb:hover{
    /* hover时切换到上方的渐变 */
    background-position: 0 0;
}

原理说明 #

• 我们将两种状态的渐变同时设置为滚动条thumb的背景，通过background-size: 100% 200%让它们垂直排列（总高度为元素的2倍）。
• 默认状态下通过background-position: 0 100%只显示下方的初始渐变；hover时修改位置为0 0，显示上方的hover渐变。
• background-position是支持CSS过渡的属性，因此能实现平滑的渐变切换效果。

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