CSS overflow-x 隐藏和 overflow-y 可见

Question

我已经阅读了这篇 SO 帖子：css overflow-x visible and overflow-y hidden causes scroll bar.

我还查看了：http://www.brunildo.org/test/Overflowxy2.html

我想实现如下效果：

当我尝试使用以下代码时：

overflow-x: hidden;
overflow-y: visible;

它显示类似以下结果：

我不想出现滚动条。

JQuery有没有解决办法？

- Prasad Jadhav

---

哈，最后一句话太棒了。 - jeremy

正如您所看到的，解决方案将由CSS完成而不是jQuery。如果您想让jQuery为您完成它，您仍然需要了解CSS规则以设置正确的代码。据我所知，jQuery中没有标准属性可以解决这个问题。 - Ol Sen

我认为这个问题很清晰明了。 - Bill

@BillyMathews 没有图片？本质上或许是这样，但我对期望的结果感到不可见。 - Grant Thomas

Answer 1

您可以使用CSS来实现这个功能，代码如下：

HTML：

<div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS：

.wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

现在你的 .wrapper div 将具有 overflow: visible;，但是您的 .inner div 永远不会溢出，因为它的最大宽度为 wrapper div 的 100%。请注意，您的包装器必须具有明确定义的宽度。 这里 是一个可工作的 jsFiddle。

- Bill

---

我在一个 position: fixed 的侧边栏 div 中使用了这些样式，并在 .wrapper 中添加了 overflow-y: scroll;，这样我就可以在固定的 div 中上下滚动并且具有 overflow-x，因为工具提示有点溢出了。 - Michael J. Calkins

它可以与块级或内联块一起使用。但是，对于浮动或绝对定位的元素（如下拉菜单），它不起作用。我在y轴部分有一个滚动条。 - throrin19

这仍然会在某个“行高”阈值下导致滚动（可以由设计决定）。 - ACJ

Answer 2

CSS：

.class-div {
   overflow-x: clip;
   overflow-y: visible;
}

clip的问题在于，它限制了所有滚动，甚至是编程式的滚动。

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

- Anand Ramesh

---

Safari 不支持 clip。 - kcsujeet

Answer 3

我不确定你是否需要类似于jQuery的东西：

$('.horiz').width($('.container').width());

其中.horiz是水平条，并将其宽度设置为包含元素的.container的宽度。

CSS：

HTML标记

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

CSS：

 .container {
    width:320px;
    height:320px;
    border:solid 5px green;
    overflow-x: hidden;
 }
 .horiz{
    width:500px;
    height:30px;
    background:red;
 }
 .vert{
    width:30px;
    height:500px;
    background:yellow;
    position:absolute;
    left:0;
    top:30px;
 }

并输出:
检查输出

- Jai