移动端自定义滚动条未滚动时不显示的解决求助

要让移动端设备上的自定义滚动条在内容超出时始终显示，而非仅滚动时出现，可通过以下两种方案调整实现：

方案一：优化WebKit滚动条样式强制显示 #

修改原有CSS代码，添加关键属性确保滚动条滑块始终可见，并开启移动端弹性滚动：

.scan-by-blocks .scan-by-block .legend {
  max-height: 120px;
  overflow-y: auto;
  /* 开启移动端弹性滚动，辅助滚动条保持可见状态 */
  -webkit-overflow-scrolling: touch;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
  width: 8px;
  /* 强制滚动条轨道始终显示 */
  display: block;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
  background-color: var(--grey-dark);
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
  /* 强制滚动条滑块始终可见 */
  visibility: visible;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

方案二：使用scrollbar-gutter属性（现代浏览器适用） #

若目标浏览器支持较新的CSS滚动条 gutter 属性，可通过它预留滚动条空间，确保滚动条始终显示：

.scan-by-blocks .scan-by-block .legend {
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 预留滚动条空间，避免内容偏移，同时强制滚动条可见 */
  scrollbar-gutter: stable both-edges;
}

/* 保留原有自定义滚动条样式 */
.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
  width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
  background-color: var(--grey-dark);
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

注意事项 #

• 两种方案均针对WebKit内核移动端浏览器（如Safari、Chrome移动端），适配当前主流移动端环境；
• 方案一兼容性更强，可适配多数旧版浏览器；scrollbar-gutter为较新属性，需确认目标浏览器版本支持情况。

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