溢出-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~~

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

Overflow-y: scroll; on side navigation prevents tooltip functionality

javascript

html

css

tooltip

overflow

当前工具提示

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