如何实现垂直菜单视口不足时可滚动且hover提示框正常显示？

针对你遇到的侧边栏滚动和tooltip显示的冲突问题，这里提供两种直接可行的解决方案：

方案一：使用overflow-x: clip（推荐） #

这是最简洁的方案，利用CSS的clip溢出规则解决滚动条与tooltip的冲突：

CSS代码 #

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px; /* 替换为你的侧边栏实际宽度 */
  overflow-y: auto; /* 垂直方向自动滚动 */
  overflow-x: clip; /* 关键：仅裁剪正常流溢出内容，允许定位元素溢出显示 */
  background: #fff; /* 按需设置背景色 */
}

.menu-item {
  position: relative; /* 作为tooltip的定位参考 */
  padding: 10px;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  left: calc(100% + 10px); /* 定位到侧边栏右侧，加间距 */
  top: 50%;
  transform: translateY(-50%);
  display: none;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 100; /* 确保tooltip在最上层 */
  white-space: nowrap; /* 避免tooltip换行 */
}

.menu-item:hover .tooltip {
  display: block;
}

原理说明 #

当元素设置overflow-y: auto/scroll时，浏览器会强制将overflow-x设为auto（即使显式声明visible），这就是之前出现水平滚动条的原因。而overflow-x: clip是CSS规范新增的属性，它不会改变垂直滚动的行为，同时允许使用absolute定位的子元素（比如tooltip）溢出容器显示，既不会出现水平滚动条，hover时tooltip也能正常展示。

方案二：Tooltip使用fixed定位（兼容旧浏览器） #

如果需要兼容不支持overflow-x: clip的旧浏览器，可以将tooltip的定位改为基于视口：

CSS代码 #

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  overflow-y: auto;
  /* 无需设置overflow-x，默认visible，但浏览器会因overflow-y自动设为auto，不过tooltip用fixed定位不会触发水平滚动 */
}

.menu-item {
  padding: 10px;
  cursor: pointer;
}

.tooltip {
  position: fixed; /* 基于视口定位，脱离侧边栏的溢出规则 */
  display: none;
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 100;
  white-space: nowrap;
}

.menu-item:hover .tooltip {
  display: block;
  left: 220px; /* 侧边栏宽度+间距 */
  top: calc(var(--item-top) + 50%); /* 通过JS给每个菜单项设置--item-top变量，对齐菜单项垂直中心 */
  transform: translateY(-50%);
}

注意事项 #

这种方案需要借助JavaScript动态计算每个菜单项的垂直位置，赋值给CSS变量--item-top，确保tooltip能精准对齐菜单项。如果菜单项数量较少，也可以手动设置每个tooltip的top值。

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