一、问题现象与影响范围

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 并重新编译

1、修改文件路径

目标文件：

• ambari-web/app/styles/application.less

建议直接追加到文件末尾，便于后续合并与定位。

操作建议

• 用注释块明确标识（后续升级/对比更省事）
• 统一把规则挂在 #side-nav.navigation-bar-fit-height 下，避免污染其它页面

2、追加 Less 内容

/* =====================================================================
 * 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;          // header 高度
  bottom: 45px;       // footer(折叠按钮)预留高度，不够就调到 55/60
  left: 0;
  right: 0;

  overflow-y: auto;
  overflow-x: hidden;

  // TTBigdata：强制恢复为 block 布局，避免 flex 导致菜单项被“拉开”
  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; // 覆盖主题可能存在的 display:none
}

#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、样式合入验证点

Less 编译后会被打包进最终的 app.css（或构建产物中的聚合 CSS），确保部署后页面加载的是新资源。

到这里基本就解决了

• 菜单区域形成“固定高度 + 内部滚动容器”
• 滚动条不再被主题隐藏
• hover 时滚动条更易感知

4、重新编译

按 Ambari Web 常规流程重新构建即可（构建命令按本地工程脚手架为准），最终把生成的前端资源部署回 Ambari Server Web 目录即可。

常见踩点汇总

• 如果出现“导航消失/布局错位”，优先检查是否误改了外层容器（navigation-bar-container）为可滚动
• 如果滚动条不显示但能滚动，优先检查 ::-webkit-scrollbar 是否仍被更高优先级规则覆盖
• 如果服务菜单被拉开为多列，优先检查 display:flex 是否在 ul.side-nav-menu 上生效

五、生产环境修复：直接修改 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 时颜色增强