允许在y轴上溢出，同时在x轴上隐藏溢出 [英] Allowing for overflow on the y-axis while hiding overflow on the x-axis

问题描述

我试图允许在y轴上溢出，而在x轴上隐藏溢出。可能希望添加以下属性：

I'm attempting to allow for overflow on the y-axis, while hiding overflow on the x-axis. One might expect that adding these properties:

.overflow {
  overflow-x: hidden;
  overflow-y: visible;
}

到一个块级别的元素就足够了，但由于一些CSS实现怪癖如此处所述，这实际上不工作。最终发生的是overflow-y的计算值变为auto，而overflow-x保持隐藏。

to a block-level element would suffice, but due to some CSS implementation quirks as documented here, this doesn't actually work. What ends up happening is that the calculated value of overflow-y becomes auto, while overflow-x remains hidden.

有没有其他方法来完成我想要的行为？

Is there any other way to accomplish the behaviour I want?

只是为了更详细，我有一个水平的项目列表，我使用自定义按钮滚动。列表的包含元素的宽度远低于列表的宽度。我不想出现滚动条，因为我使用自己的自定义按钮来浏览列表，所以我需要overflow-x隐藏。在悬停时，我想应用一个变换来放大元素的大小，但我想要的元素能够溢出到包含元素的顶部和底部，因此需要溢出Y是可见的。

Just for a bit more detail, I have a horizontal list of items that I'm using custom buttons to scroll through. The width of the containing element of the list is much lower than the width of the list. I don't want a scroll bar to appear, because I'm using my own custom buttons to navigate through the list, and so I need for overflow-x to be hidden. On hover, I want to apply a transform to scale up the size of the elements, but I want the elements to be able to overflow outside of the top and bottom of the containing element, thus the need for overflow-y to be visible.

推荐答案

如果你不介意添加一些额外的标记，似乎有一个简单的解决方案。

If you don't mind adding some extra markup , there seems to be an easy solution.

您只需要使用两个div，每个溢出一个。

You'll just have to use two div, one for each overflow.

例如：

<div class="outer">
    <div class="middle">
         <!-- your content here -->
    </div>
</div>

和以下标记：

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

看起来像这样。

一个小例子，这里。

这篇关于允许在y轴上溢出，同时在x轴上隐藏溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！