Chrome中滚动条始终可见，Firefox中却消失，如何实现一致效果？

我希望部分滚动条始终保持可见，为此使用了以下CSS代码：

.frameXY {
    overflow-y: scroll;
    overflow-x: scroll;
    height: 100vh;
}

.frameXY::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frameXY::-webkit-scrollbar:vertical {
    width: 11px;
}

.frameXY::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frameXY::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frameX {
    overflow-x: scroll;
}

.frameX::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frameX::-webkit-scrollbar:vertical {
    width: 11px;
}

.frameX::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frameX::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

该代码在Chrome中可实现滚动条始终可见，但在Firefox中滚动条仅初始显示后便消失。请问如何在Firefox中实现相同的滚动条始终可见效果？

解决方案 #

Firefox 默认会在内容无需滚动时隐藏滚动条，要实现滚动条始终可见，需要添加 Firefox 专属的滚动条样式属性，结合原有设置调整如下：

1. 核心修改点 #

• 保留容器的 overflow-x: scroll/overflow-y: scroll 属性，这是强制容器预留滚动条空间的基础；
• 添加 scrollbar-width 控制滚动条宽度，scrollbar-color 定义滑块和轨道颜色，让Firefox的滚动条样式与WebKit保持一致，且始终显示。

2. 完整兼容代码 #

/* Firefox 专属滚动条样式 */
.frameXY, .frameX {
    scrollbar-width: thin; /* 匹配WebKit设置的窄滚动条宽度 */
    scrollbar-color: rgba(0, 0, 0, .5) white; /* 滑块颜色、轨道颜色 */
}

.frameXY {
    overflow-y: scroll;
    overflow-x: scroll;
    height: 100vh;
}

/* WebKit 浏览器（Chrome、Safari等）原有样式 */
.frameXY::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frameXY::-webkit-scrollbar:vertical {
    width: 11px;
}

.frameXY::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frameXY::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.frameX {
    overflow-x: scroll;
}

.frameX::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frameX::-webkit-scrollbar:vertical {
    width: 11px;
}

.frameX::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frameX::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

3. 关键说明 #

• scrollbar-width: thin 让Firefox滚动条宽度接近你在WebKit中设置的11px，也可指定具体数值（如11px）；
• scrollbar-color 的两个值分别对应滑块和轨道颜色，完全匹配原有样式中的配色；
• 只要容器保持 overflow-*: scroll，Firefox就会始终显示滚动条，不会因内容不足而隐藏。

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