html - 允许在 y 轴上溢出,同时在 x 轴上 overflow hidden

标签 html css

<分区>

我试图在 y 轴上允许溢出,同时在 x 轴上 overflow hidden 。人们可能希望添加这些属性:

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

到一个 block 级元素就足够了,但由于一些 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 - 允许在 y 轴上溢出,同时在 x 轴上 overflow hidden ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10522137/

相关文章:

css - 如何在流体宽度容器中居中裁剪图像 (<img>)

javascript - 使用 JavaScript(可能是 CSS)在特定宽度/高度的 HTML5 Canvas 中显示完整图像尺寸(100% 宽度/高度)

html - 我如何同时 (1) 防止 <div> 占用所有可用宽度,以及 (2) 使其与相邻元素折叠边距?

javascript - 使用 Javascript 创建下拉菜单

HTML5 中的 CSS 占位符问题

javascript - 对列表使用 .append() 将文本放在换行符上

javascript - 预加载页面适用于所有主流浏览器,但 Safari 除外

html - CSS 选择器分组与嵌套

html - 似乎无法移动元素

html - 在没有 Canvas /显示器的情况下拍摄不可见的 WebRTC/视频照片