CSS overflow-x hidden和overflow-y visible

Question

我已阅读此帖子：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有没有解决方案呢？

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永远不会溢出，因为它的最大宽度为包装div的100％。请注意，您的包装器必须具有明确定义的宽度。

Here是一个有效的jsFiddle

Answer 2

看看你想要实现的目标在css中是不可能的，overflow不会让你实现这一点。相反，您可以使用jquery获取您在已发布的图片/图像中描述的输出。

我不确定你是否需要这样的东西：

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

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

HTML标记

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

CSS：

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

jQuery的：

$(function(){
   $('.horiz').width($('.container').width());
});

并输出：

Check the Output

Answer 3

CSS：

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

剪辑的事情是，它限制了所有滚动，甚至是程序化的滚动。

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