Chrome 121中固定高度元素overflow-y: scroll时保持滚动条可见

针对设置了overflow-y: scroll或auto的固定高度元素，要让滚动条默认一直显示，可通过以下CSS实现：

• 先确保元素基础样式配置正确：

.scroll-box {
  height: 300px; /* 自定义固定高度 */
  overflow-y: scroll; /* 或设置为auto */
}

• 再通过WebKit滚动条伪元素强制覆盖Chrome 121的默认隐藏逻辑：

/* 强制显示滚动条容器 */
.scroll-box::-webkit-scrollbar {
  width: 8px; /* 和你之前设置的scrollbar-width保持一致 */
  opacity: 1; /* 强制滚动条不透明 */
}

/* 匹配你之前配置的轨道颜色 */
.scroll-box::-webkit-scrollbar-track {
  background: #f0f0f0;
}

/* 匹配你之前配置的滑块颜色 */
.scroll-box::-webkit-scrollbar-thumb {
  background: #888;
}

/* 可选：保留悬停时的滑块高亮效果 */
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

如果需要批量应用到所有符合条件的元素，可使用属性选择器简化代码：

/* 匹配所有内联或类设置了overflow-y:scroll/auto的元素 */
[style*="overflow-y: scroll"], 
[style*="overflow-y: auto"],
.scroll-y-auto,
.scroll-y-scroll {
  /* 确保元素有固定高度 */
  min-height: 200px;
}

/* 统一设置滚动条强制显示 */
[style*="overflow-y: scroll"]::-webkit-scrollbar,
[style*="overflow-y: auto"]::-webkit-scrollbar,
.scroll-y-auto::-webkit-scrollbar,
.scroll-y-scroll::-webkit-scrollbar {
  width: 8px;
  opacity: 1;
}

/* 统一配置轨道和滑块样式 */
[style*="overflow-y: scroll"]::-webkit-scrollbar-track,
[style*="overflow-y: auto"]::-webkit-scrollbar-track,
.scroll-y-auto::-webkit-scrollbar-track,
.scroll-y-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
}

[style*="overflow-y: scroll"]::-webkit-scrollbar-thumb,
[style*="overflow-y: auto"]::-webkit-scrollbar-thumb,
.scroll-y-auto::-webkit-scrollbar-thumb,
.scroll-y-scroll::-webkit-scrollbar-thumb {
  background: #888;
}

说明：Chrome 121调整了滚动条的默认显示逻辑，非悬停状态下会自动隐藏滚动条。通过直接设置::-webkit-scrollbar系列伪元素的透明度和样式，可强制让滚动条始终可见，同时能和你之前配置的scrollbar-color、scrollbar-width属性保持视觉一致。

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