javascript - 当子内容超过父高度时，在溢出 :visible; div, 内滚动

Question

我有一个侧边栏导航菜单，其中包含悬停时显示的子项和子项。这是一个jsfiddle链接:https://jsfiddle.net/s096zfpd/

这显然被大大简化了，只是为了让大家了解我想要完成的任务。我的问题是有时 <nav> 中的列表超过<nav>的高度。在本例中，我希望能够在 <nav> 内滚动，但这样做会损害overflow-x:visible我需要显示的属性.sub-nav ，因为 CSS 根本不允许同时使用 overflow-x:visible和overflow-y:scroll 。

我想也许 js 解决方案在这里可以很好地工作。有什么建议吗？

谢谢。

Answer 1

如果您对 overflow-x 或 overflow-y 使用可见，而对另一个则使用不可见的内容。可见值被解释为 auto 这意味着我们不能将可见和隐藏应用于同一个 DOM 元素，所以理想的解决方案是

• 创建包装器，然后将 overflow-x 和 overflow-y 应用于两个不同的 DOM 元素。分享 js fiddle 解决您的问题

  https://jsfiddle.net/e2edvupc/