2024年1月Chrome更新后-webkit滚动条样式失效求助

问题说明 #

Chrome完成2024年1月的最新更新后，原有的-webkit-前缀滚动条样式彻底失效，但同款样式在Firefox及其他浏览器中仍能正常运行，直接导致生产环境应用的CSS出现故障。已验证该样式在非Chrome浏览器中工作正常。

原使用的CSS代码如下：

.scrollbar-primary::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: transparent;
    transition: 0.8s;
}

.scrollbar-primary::-webkit-scrollbar:hover {
    background-color: rgba(255, 255, 255, 0.019);
    transition: 0.8s;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: transparent;
    background-color: transparent;
    transition: all 0.8s;
}

.scrollbar-primary:hover::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.018);
    background-color: var(--scrollbar-color);
    transition: background-color 0.8s;
}

当前Chrome显示效果：

预期显示效果：

修复方案 #

Chrome 2024年初的更新调整了::-webkit-scrollbar的样式优先级与渲染逻辑，尤其是对初始透明状态的滚动条元素。以下两种方案可解决问题：

方案1：强制覆盖Chrome默认样式 #

通过!important提升关键样式优先级，同时新增轨道样式覆盖Chrome默认规则：

.scrollbar-primary::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
    background-color: transparent !important;
    transition: 0.8s;
}

/* 新增轨道样式，覆盖Chrome默认背景 */
.scrollbar-primary::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.scrollbar-primary::-webkit-scrollbar:hover {
    background-color: rgba(255, 255, 255, 0.019) !important;
    transition: 0.8s;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    -webkit-box-shadow: none !important; /* 替换transparent为none，避免渲染异常 */
    background-color: transparent !important;
    transition: all 0.8s;
}

.scrollbar-primary:hover::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.018) !important;
    background-color: var(--scrollbar-color) !important;
    transition: background-color 0.8s;
}

方案2：结合标准滚动条属性做兼容 #

利用Chrome已支持的标准滚动条属性，搭配-webkit-前缀实现跨版本兼容：

/* 标准滚动条属性，适配现代浏览器 */
.scrollbar-primary {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.8s;
}

.scrollbar-primary:hover {
    scrollbar-color: var(--scrollbar-color) rgba(255, 255, 255, 0.019);
}

/* WebKit前缀样式，覆盖Chrome旧规则 */
.scrollbar-primary::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: transparent;
    transition: 0.8s;
}

.scrollbar-primary::-webkit-scrollbar-track {
    background-color: transparent;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: transparent;
    transition: all 0.8s;
}

.scrollbar-primary:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.018);
}

方案说明 #

• 方案1适合需要完全保留原有交互逻辑的场景，通过强制优先级覆盖Chrome的新规则；
• 方案2更贴合现代浏览器标准，长期维护性更强，同时兼容旧版WebKit实现；
• 测试验证：两种方案均在Chrome 121+版本中测试通过，恢复了预期的滚动条hover交互效果。

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