溢出-y：滚动；侧面导航阻止工具提示功能

Question

我有一个带有以下样式的侧边导航

position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #11101D;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
overflow-x: visible;
overflow-y: scroll;

这允许用户在侧面导航上垂直滚动。

当用户将鼠标悬停在导航项上时，右侧会出现一个工具提示。

position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;

但是，由于父级上的overflow-y: scroll;，它不会与侧边栏重叠，而是水平滚动以查看它，这是不希望的。

当前工具提示

所需的工具提示（带有侧导航滚动功能）

我有一个 JSFiddle 包含所有标记和样式。

我希望侧导航可以垂直滚动，同时仍然具有查看工具提示的功能。

任何帮助将不胜感激。这是基于 React 应用程序的，因此更喜欢非 JQuery 解决方案。

Answer 1

显然，你不能，它是“写在规范中的”

来源：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

来源：overflow-x: visible; doesn't work with overflow-y: auto; any workaround?

但是您可以将菜单包装在一个容器中以拆分溢出，父级使用overflow-x: auto，子级使用overflow-y: scroll