Ambari 3.0.0 左侧服务菜单滚动条缺失修复

目前 Kerberos 章节已经推出 FreeIPA 方案，欢迎有需要的查阅，本站也将完成内容迁移。Ttbigdata——Ambari Kerberos 大全

一、问题现象与影响范围

Ambari 3.0.0 环境中，当组件安装数量增多时，左侧 Service 菜单区域出现“列表超出但无法滚动”的现象，导致部分服务入口被遮挡，无法从导航栏直接访问。

影响点

• 服务数量一多，左侧菜单显示不全
• 菜单无法滚动，用户只能靠缩放/折叠/刷新绕行
• 对“运维巡检 / 日常操作 / 新服务验证”影响明显

二、修复效果预览

先看改完后的效果：左侧菜单可正常滚动，同时滚动条默认“弱化显示”，鼠标移入时再高亮显示，视觉更干净。

此修改基于 Ambari 3.0.0 源码。若使用 ttr 2.2.3 及以上版本，该问题已修复，无需修改。

结论先行
核心目标只有两个：

• 1）让 ul.side-nav-menu 真正具备可滚动容器能力（overflow-y: auto）
• 2）覆盖掉主题里把滚动条隐藏掉的规则（display:none），并补齐 hover 交互

三、定位思路：F12 锁定 side-nav-menu

1、元素定位

在页面使用 F12，直接定位左侧菜单节点，关键类名是：

• side-nav-menu

2、现象确认

一边搜索样式、一边做临时覆盖测试，可以观察到滚动条相关样式被隐藏，display 命中了 none，因此滚动条无法出现。

关键判断
不是“没写 overflow”，而是“写了也被隐藏/布局干扰”：

• 一类是滚动条伪元素被 display:none
• 另一类是容器高度/定位导致滚动区域没有形成可滚动盒子

四、源码修复方案：追加 Less 并重新编译

处理办法可参考
22212:源码解决办法

五、生产环境修复：直接修改 app.css

源码修复适合长期维护；生产环境有时只需要“先止血”，可以直接改 Ambari Server Web 目录下的 CSS。

1、编辑目标文件

• /usr/lib/ambari-server/web/stylesheets/app.css

请不要乱插入
需要把规则加到合适的位置（这里定位到 5609 行是有效方式）。随意插入可能被后续同名选择器覆盖，表现就是“看起来加了但不生效”。

2、插入 CSS 内容

/* =====================================================================
 * TTBigdata 优化：Side Nav 菜单滚动与滚动条交互优化
 * - 解决服务过多时左侧菜单无法完整显示的问题
 * - 默认隐藏滚动条，鼠标悬停时显示（更干净的 UI）
 * ===================================================================== */
#side-nav.navigation-bar-fit-height .navigation-bar-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#side-nav.navigation-bar-fit-height ul.side-nav-menu {
  position: absolute;
  top: 55px;
  bottom: 45px;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: block !important;
}
#side-nav.navigation-bar-fit-height ul.side-nav-menu > li {
  display: block;
  width: 100%;
}
/* TTBigdata：滚动条默认“不可见”，hover 时显示（WebKit 系） */
#side-nav.navigation-bar-fit-height ul.side-nav-menu::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}
#side-nav.navigation-bar-fit-height ul.side-nav-menu::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border-radius: 8px;
}
#side-nav.navigation-bar-fit-height ul.side-nav-menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28) !important;
}
/* TTBigdata：Firefox 兼容（hover 时改变颜色，无法完全控制显示/隐藏） */
#side-nav.navigation-bar-fit-height ul.side-nav-menu {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#side-nav.navigation-bar-fit-height ul.side-nav-menu:hover {
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

插入效果如下（以实际文件位置为准）：

3、生效验证

验证清单

• 刷新页面后左侧菜单可滚动
• 服务数量增多时不再“截断”
• 鼠标移入滚动区域，滚动条 thumb 可见（Chrome/Edge/Safari）
• Firefox 下滚动条样式变为 thin，hover 时颜色增强