CSS 溢出-x 隐藏和溢出-y 可见

Question

我已阅读此 SO 帖子： css 溢出-x 可见和溢出-y 隐藏导致滚动条。

我也经历过： 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％。 请注意，您的包装器必须具有明确定义的宽度。

这是一个有效的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());
});

和它的输出：

检查输出

Answer 3

CSS：

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

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

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