如何解决CSS自定义滚动条样式在Firefox浏览器中不生效的问题

你目前使用的::-webkit-scrollbar系列属性是WebKit内核浏览器（Chrome、Edge、Safari等）的私有实现，Firefox并未兼容这套规范，它从64版本开始支持CSS滚动条样式的标准属性，你可以在原有代码基础上补充Firefox专属属性实现兼容。

/* WebKit内核浏览器兼容样式 */
::-webkit-scrollbar{
    width: 10px;
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb{
    background-color: #353b48;
}

/* Firefox浏览器兼容样式 */
* {
    /* 滚动条宽度，可选值：auto（默认）、thin（窄滚动条，对应你设置的10px效果）、none（隐藏） */
    scrollbar-width: thin;
    /* 第一个参数为滑块颜色，第二个参数为滚动条轨道颜色 */
    scrollbar-color: #353b48 #f1f1f1;
}

注意事项 #

• scrollbar-width暂时不支持自定义精确像素值，只能选择内置的三个枚举值，这是CSS标准规范的限制
• 如果仅需要给指定元素设置自定义滚动条，将Firefox的两个属性写在对应元素的选择器下即可，不需要全局用*选择器
• 64版本以下的Firefox不支持上述标准属性，暂无纯CSS兼容方案，不过该类老旧版本市场占比极低，通常无需额外兼容

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