如何修改div元素的滚动条颜色且不影响浏览器滚动条

问题根源 #

你之前用scrollbar-color:#B99C7E没效果，核心原因是这个属性必须传入两个值：第一个是滚动滑块的颜色，第二个是滚动轨道的颜色。只传单个值属于语法错误，浏览器会直接忽略该属性，所以控制台显示它被禁用。

另外说明：scrollbar-color是标准CSS滚动条样式属性，目前Chrome 114+、Edge 114+、Firefox 64+都已支持，完全符合你「不影响全局滚动条、不用webkit伪元素」的需求。

修正后的CSS代码 #

修改目标div的样式，补充完整scrollbar-color的两个参数，轨道颜色可以和div背景色保持一致，视觉更协调：

.ben-details,.lucy-details,.castle-details,.brett-details,.sheldon-details{
    background-color: #421803;
    height:10rem;
    overflow-y: scroll;
    scroll-behavior: smooth;
    margin-left: 2rem;
    /* 滑块颜色：#B99C7E，轨道颜色：与背景同色#421803 */
    scrollbar-color: #B99C7E #421803;
}

验证要点 #

• 确认浏览器版本在支持范围内，老版本浏览器可能不识别该属性
• 通过开发者工具查看元素最终样式，确保没有其他CSS规则覆盖scrollbar-color

修改后，只有这些指定的div会应用自定义滚动条样式，全局滚动条不受影响。

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