如何让Chrome Beta版的水平滚动条永久显示？

CSS强制显示水平滚动条 #

针对Windows 10上该Beta版本的滚动条自动隐藏问题，通过自定义WebKit滚动条样式可强制让滚动条永久显示，绕过默认隐藏逻辑：

/* 给你的滚动容器添加此类 */
.horizontal-scroll-container {
  overflow-x: auto;
}

/* 强制设置水平滚动条高度，确保可见 */
.horizontal-scroll-container::-webkit-scrollbar {
  height: 10px;
}

/* 自定义滚动条轨道样式 */
.horizontal-scroll-container::-webkit-scrollbar-track {
  background: #f0f0f0;
}

/* 自定义滚动条滑块样式 */
.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* 滑块hover效果（可选） */
.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

该方案不受overflow-x: auto或scroll的原有限制，直接通过样式强制滚动条保持可见，还能根据需求调整样式匹配UI设计。

关闭Chrome实验特性（可选） #

若不想修改CSS，可直接禁用Beta版的滚动条自动隐藏特性：

• 地址栏输入chrome://flags
• 搜索Overlay Scrollbars或Scrollbar Behavior
• 将选项改为Disabled
• 重启浏览器即可恢复传统滚动条行为

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