CSS overflow-x hidden和overflow-y visible

Question

我已经读过这个SO帖子:css overflow-x visible和overflow-y hidden导致滚动条.

我也经历过:http://www.brunildo.org/test/Overflowxy2.html

我想实现如下目标:

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

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

它显示如下结果:

我不希望滚动条出现.

Jquery有什么解决方案吗？

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;
}

现在你的.wrapperdiv将会有,overflow: visible;但你的.innerdiv永远不会溢出,因为它的最大宽度为包装div的100%.请注意,您的包装器必须具有明确定义的宽度.

这是一个有效的jsFiddle

Answer 2

CSS：

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

剪辑的问题是，它限制所有滚动，甚至是编程滚动。

请参阅： https: //developer.mozilla.org/en-US/docs/Web/CSS/overflow