Question

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

以下链接是我最接近我的问题的答案。

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

在此链接中，W3C spec说：

'overflow-x'和'overflow-y'的计算值与它们的指定值，除了某些与'visible'的组合是不可能的：如果一个被指定为'可见'而另一个被指定为 '滚动'或'自动'，然后'可见'设置为'自动'。计算出来的 'overflow'的值等于'overflow-x'的计算值if 'overflow-y'是一样的;否则它是一对计算值 'overflow-x'和'overflow-y'。

我想知道的是，有没有新的解决方案。

The problem of mine is in this fiddle.

我制作了侧边栏＆＃39; ＆＃39; BootStrap＆＃39;在我的小提琴中简单。

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

你可以看到我评论了溢出-y：滚动＆＃39;班级＆＃39; .panel＆＃39;在css部分。

在这种情况下，＆＃39; hover＆＃39;会工作，但滚动＆＃39;韩元＆＃39;吨

如果我清除该评论，请立即停留＆＃39;不会工作，但滚动＆＃39;将

我想看到的是，＆＃39;悬停＆＃39;并且＆＃39;滚动＆＃39;一起工作。

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

或者仍然没有办法解决这个问题？

Answer 1

您的代码正常工作，您无法看到悬停，因为您设置为该块的宽度为50px，如果您设置位置：绝对在悬停中您可以看到悬停效果但它与子项重叠。所以有一件事我想知道你想要相同的宽度，或者你只是为演示目的而设置。

Answer 2

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

当然，你也需要一些css hacks，

查看更新的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

我通过添加＆＃39; div＆＃39;解决了这个问题。在＆＃39; div之间和＆＃39; ul＆＃39;。

And here's my final fiddle which works almost fitting with my intent

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

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

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

4 个答案: