Firefox中Div滚动条闲置时消失问题解决求助

要让Firefox中你的transcript-container元素滚动条始终可见（即使内容未超出容器高度），可以通过两种方式实现，根据你的需求选择：

方法1：强制始终显示滚动条（所有浏览器统一行为） #

直接将overflow-y: auto改为overflow-y: scroll，这样不管内容是否超出容器最大高度，滚动条都会始终显示（内容未超出时滚动条为禁用状态）。修改后的CSS如下：

.transcript-container {
    max-height: 250px;
    overflow-y: scroll;  /* 强制显示垂直滚动条 */
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    border-radius: 8px;
    text-align: justify;
}

这种方式代码简单，所有浏览器行为一致；缺点是内容未超出时，滚动条会一直占用容器右侧的空间。

方法2：保持auto逻辑，仅强制Firefox显示滚动条占位 #

如果你希望保留overflow-y: auto的逻辑（内容超出时可滚动，未超出时不可滚动），但让Firefox中滚动条始终占位显示（和Chrome行为一致），可以使用Firefox专属的滚动条样式属性实现：

.transcript-container {
    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-top: 15px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    border-radius: 8px;
    text-align: justify;
    /* 设置Firefox滚动条宽度，确保占位空间 */
    scrollbar-width: thin;
}

/* 强制Firefox显示滚动槽背景 */
.transcript-container::-moz-scrollbar-track {
    background-color: transparent;
}

/* 定义Firefox滚动条宽度 */
.transcript-container::-moz-scrollbar {
    width: 8px;
}

/* 设置滚动条滑块样式，内容未超出时显示为浅灰色禁用状态 */
.transcript-container::-moz-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 4px;
}

这种方式保留了auto的交互逻辑，同时让Firefox的滚动条行为和Chrome对齐；缺点是需要额外添加Firefox专属的CSS伪元素样式。

内容的提问来源于stack exchange，提问作者Santhosh Kumar O