在phpMyAdmin中如何美化左侧导航栏的滚动条

必须修改CSS文件或通过config.inc.php注入自定义样式，因phpMyAdmin无滚动条主题配置；推荐直接编辑navigation.css添加#serveritems::-webkit-scrollbar系列规则，或用$cfg['NavigationTreeCustomStyle']动态注入，仅WebKit内核生效。

phpmyadmin 的左侧导航栏滚动条无法通过界面设置美化，必须修改其 css 文件或注入自定义样式 —— 因为它默认使用浏览器原生滚动条，且不提供主题级滚动条配置项。

直接修改 phpMyAdmin 的 navigation.css 文件

这是最稳定、生效范围明确的方式。phpMyAdmin 5.0+ 版本中，左侧导航栏的样式由 navigation.css 控制，路径通常为：./css/navigation.css（相对于 phpMyAdmin 根目录）。

• 找到该文件后，在末尾添加标准的 ::-webkit-scrollbar 系列规则（仅对 Chromium/Edge/Safari 生效）
• 例如添加以下代码可实现窄滑块 + 圆角 + 淡色轨道：

/* 导航栏滚动条美化 */#serveritems::-webkit-scrollbar {  width: 6px;}#serveritems::-webkit-scrollbar-track {  background: #f5f5f5;  border-radius: 3px;}#serveritems::-webkit-scrollbar-thumb {  background: #c1c1c1;  border-radius: 3px;}#serveritems::-webkit-scrollbar-thumb:hover {  background: #a0a0a0;}

注意：#serveritems 是 phpMyAdmin 左侧数据库列表容器的实际 ID，不是通用类名，改错选择器将无效。

通过 config.inc.php 注入自定义 CSS

如果你没有服务器文件写入权限，或使用的是托管环境（如 cPanel 自带 phpMyAdmin），可利用 phpMyAdmin 的 $cfg['NavigationTreeCustomStyle'] 配置项动态注入样式。

• 在 config.inc.php 中添加：
• $cfg['NavigationTreeCustomStyle'] = '::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f8f9fa; } ::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 3px; }';
• 该配置仅影响导航树区域，不会污染其他界面
• 不支持 Firefox（它不识别 ::-webkit-scrollbar），Firefox 用户仍看到原生滚动条

为什么不能用主题或插件方式美化？

phpMyAdmin 不提供滚动条主题钩子，也没有第三方滚动条插件生态。所有「美化插件」类方案实际都是：

立即学习“PHP免费学习笔记（深入）”；

• 覆盖 navigation.css 文件（等同于第一种方法）
• 用 JavaScript 动态插入 <style> 标签（不稳定，可能被 CSP 阻止或加载时机错乱）
• 依赖 jQuery 插件模拟滚动条（会破坏原生滚动行为，如滚轮精度、键盘导航、触控板惯性，且 phpMyAdmin 5.2+ 已移除全局 jQuery 依赖）

因此，硬改 CSS 或配 NavigationTreeCustomStyle 是唯二可靠路径。

滚动条美化效果只在 WebKit 内核浏览器中可见；Firefox 和部分 Linux 下的 Chrome 可能需额外启用 scrollbar-width（但 phpMyAdmin 未封装该属性支持）。改完别忘了清空浏览器缓存，否则新样式不生效。