如何在不将overflow-x更改为auto的情况下使overflow-y滚动？

Question

我知道这是一个重复的问题。

下面的链接是与我找到的问题最接近的答案。

CSS溢出-x：可见; 和溢出-y：隐藏； 导致滚动条问题

在此链接中， W3C规范指出：

“ overflow-x”和“ overflow-y”的计算值与它们的指定值相同，不同之处在于某些与“ visible”的组合是不可能的：如果将一个指定为“ visible”，而另一个指定为“ scroll”或“自动”，然后将“可见”设置为“自动”。 如果“ overflow-y”相同，则“ overflow”的计算值等于“ overflow-x”的计算值。 否则为“ overflow-x”和“ overflow-y”的一对计算值。

我想知道的是，对此是否有任何新的解决方案。

我的问题就在这个小提琴中。

在我的小提琴中，我简化了“ BootStrap”的“侧边栏”类。

overflow-x: visible;
//overflow-y: scroll;

您可以看到我在css部分中注释了类'.panel'的'overflow-y：scroll'。

在这种情况下，“悬停”将起作用，但“滚动”将不起作用。

如果我清除该注释，则“悬停”不起作用，但“滚动”将起作用。

我想看到的是“悬停”和“滚动”一起工作。

有没有人有任何方法或想法来解决此问题？

还是仍然没有办法解决这个问题？

Answer 1

您的代码正常工作，因为您设置为该块的宽度为50px，所以您也看不到悬停，如果您将position：absolute悬停在您可以看到悬停效果，但它与子项重叠。 所以我想知道您想要相同的宽度，或者只是出于演示目的而设置。

Answer 2

您可以使用jQuery，以便根据事件更改.panel溢出。

绝对，您还将需要一些CSS技巧，

请参阅更新的JSfiddle 。

Answer 3

我喜欢这个问题。

所以，我在这里创建了一个小提琴： https : //jsfiddle.net/n4tvvora/4/

它非常接近您的需求（我认为）。 让我知道它是否不符合您的要求。 我们可以做得更好。

代码重点：

.panel:hover ul.list:first-child {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel ul.list:first-child {
    display: block;
}

Answer 4

我已经通过在“ div”和“ ul”之间添加“ div”解决了这一问题。

这是我最后的小提琴，几乎符合我的意图 。

<div class="panel">         // added div

我希望这项工作对任何人都有帮助。 :)