如何阻止Firefox中滚动条自动淡出？Angular 14适配解决方案咨询

不需要依赖第三方库，直接用原生CSS就能强制Firefox始终显示滚动条，具体实现如下：

步骤1：添加自定义滚动条样式 #

在组件的CSS文件（或全局样式文件）中添加以下样式：

/* 配置容器基础样式 + Firefox滚动条强制显示 */
.custom-scroll-container {
  overflow: auto;
  max-width: 100px;
  max-height: 100px;
  /* Firefox：固定滚动条宽度，避免自动淡出 */
  scrollbar-width: thin;
  /* 自定义滚动条与轨道颜色，可选 */
  scrollbar-color: #888 #eee;
}

/* 可选：为Chrome/Edge等webkit内核浏览器统一滚动条样式 */
.custom-scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.custom-scroll-container::-webkit-scrollbar-track {
  background-color: #eee;
}

步骤2：修改HTML结构 #

将原容器替换为自定义类名的容器：

<div class="custom-scroll-container">
dfkdjkfdfjkdkjfdfjkkkkkkkkkkkkkkkk
dfdjkfdkjf
dfjkdjfdf


fdjk
</div>

说明 #

• 该方案完全基于原生CSS，无需额外依赖，完美兼容Angular 14
• 通过scrollbar-width强制Firefox保留滚动条显示，不会在鼠标移出容器后自动淡出
• 可选的webkit内核样式可以让不同浏览器的滚动条风格保持一致

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