html – 允许在y轴上溢出同时隐藏x轴上的溢出

前端之家收集整理的这篇文章主要介绍了html – 允许在y轴上溢出同时隐藏x轴上的溢出前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > overflow-y:visible not working when overflow-x:hidden is present 2个
我试图允许y轴溢出,同时隐藏x轴上的溢出.有人可能会期望添加这些属性
.overflow {
  overflow-x: hidden;
  overflow-y: visible;
}

块级元素就足够了,但是由于一些CSS实现的怪癖,如here所述,这实际上并不起作用.最终发生的事情是overflow-y的计算值变为auto,而overflow-x保持隐藏状态.

有没有其他方法可以实现我想要的行为?

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

解决方法

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

你只需要使用两个div,每个溢出一个.

例如:

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

以下标记

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

似乎做了这个工作.

一个小例子here.

猜你在找的HTML相关文章