如何设置滚动条始终可见？解决div内滚动条仅滚动时显示问题

嘿，这两个滚动条的问题我刚好碰到过，给你详细说说怎么解决～

其实核心思路是强制给滚动条设置可见的样式，因为大部分现代浏览器默认会把未触发滚动的滚动条隐藏或者变透明。你需要针对不同浏览器内核做适配：

• 对于Chrome、Edge、Safari这类Webkit内核浏览器：通过::-webkit-scrollbar系列伪元素自定义滚动条的宽度、轨道和滑块样式，让它始终有可见的外观。
• 对于Firefox：使用scrollbar-width和scrollbar-color属性来控制滚动条的显示。

举个通用的例子（比如给页面body设置始终显示垂直滚动条）：

body {
  overflow-y: scroll; /* 强制保留滚动条位置 */
}

/* Webkit内核浏览器样式 */
body::-webkit-scrollbar {
  width: 10px; /* 定义滚动条宽度，确保有可见空间 */
}
body::-webkit-scrollbar-track {
  background: #f5f5f5; /* 轨道背景色 */
}
body::-webkit-scrollbar-thumb {
  background: #ccc; /* 滑块颜色，让滚动条可见 */
}

/* Firefox浏览器样式 */
body {
  scrollbar-width: thin; /* 可选值：auto/thin/none，这里选thin保证可见 */
  scrollbar-color: #ccc #f5f5f5; /* 滑块颜色 轨道颜色 */
}

你现在用的.table-wrapper.grouped { max-height: 300px; overflow-y: scroll; }已经做对了第一步——强制保留滚动条的位置，但滚动条只在滚动时显示，是因为浏览器默认的滚动条样式是“隐藏式”的。只需要给这个div加上自定义滚动条样式就行：

.table-wrapper.grouped {
  max-height: 300px;
  overflow-y: scroll;
  /* Firefox专属设置 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit内核浏览器专属设置 */
.table-wrapper.grouped::-webkit-scrollbar {
  width: 8px; /* 设置滚动条宽度，避免太宽影响布局 */
}
.table-wrapper.grouped::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景，和容器背景协调 */
}
.table-wrapper.grouped::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色，确保滚动条清晰可见 */
}
/* 可选：hover时加深滑块颜色，提升交互感 */
.table-wrapper.grouped::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这样设置后，不管你有没有滚动这个div，滚动条都会一直保持可见的状态，不会再自动隐藏啦～

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