CSS overflow-x:可见;和overflow-y:隐藏;导致滚动条问题

假设你有一些样式和标记:

ul
{
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
}
li
{
display: inline-block;
}
<div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
</ul>
</div>

当你看到这个。<ul>在底部有一个滚动条，尽管我已经为溢出x/y指定了可见和隐藏值。

(Chrome 11和opera (?))

我猜一定有一些w3c规范或什么东西告诉这发生了，但对于我的生活，我不明白为什么。

JSFiddle

我找到了一种方法，通过在ul周围添加另一个元素来实现相同的结果。# EYZ2

518795 次浏览
小开
最佳答案

经过一番认真的搜索，我似乎找到了我问题的答案:

来自:# EYZ0

在Gecko, Safari, Opera， '可见' 与连用时也变成auto ' hidden '(换句话说就是' visible ') 和组合时变成auto 还有什么不同的吗 “可见的”)。Gecko 1.8, Safari 3, Opera

W3C规范还说:

overflow-x的计算值 ' overflow-y '和their是一样的 指定的值，除了一些 与“visible”的组合则不是 可能:如果指定为 ' visible '另一个是' scroll '或者 auto，然后visible设为 “汽车”。的计算值 ' overflow '等于computed 如果' overflow-y '则' overflow-x '的值 是一样的;否则就是对 ' overflow-x '的计算值 “overflow-y”。< / p >

短版:

如果您使用visible表示overflow-x或overflow-y，而使用visible以外的其他值，则visible值将被解释为auto。

小开

我最初发现了一个CSS方式绕过这个时，使用循环jQuery插件。Cycle使用JavaScript将我的幻灯片设置为overflow: hidden，所以当我将图片设置为width: 100%时，图片看起来会垂直切割，所以我强迫它们使用!important可见，为了避免显示盒子外的幻灯片动画，我将overflow: hidden设置为幻灯片的容器div。希望这对你有用。

更新-新的解决方案:

最初的问题 -> http://jsfiddle.net/xMddf/1/ (即使我使用overflow-y: visible，它也会变成“auto”，实际上是“scroll”)

#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}

新的解决方案 -> http://jsfiddle.net/xMddf/2/ (我发现了一个变通办法，使用包装器 div将overflow-x和overflow-y应用于不同的DOM元素，因为詹姆斯•库利建议将visible和hidden组合到单个DOM元素上。 

#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
小开

我使用了内容+包装器的方法……我做了一些与之前提到的不同的事情:我确保我的包装器的边界不与内容的边界朝着我想让人看见的方向对齐。

重要注意:它很容易得到内容+包装器，相同的边界方法工作在一个浏览器或另一个取决于各种CSS组合position， overflow-*等，但我从来没有使用这种方法让他们所有正确(Edge, Chrome, Safari等)。

但当我有这样的东西:

#hack_wrapper {
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}


#content_wrapper {
position:absolute;
width:100%;
height:15%;
overflow:visible;
}
<!-- #hack_wrapper div created solely for this purpose -->
<div id="hack_wrapper">
<div id="content_wrapper">
... this is an example of some content with far too much horizontal content... like, way, way, way too much content.
</div>
</div>

…所有的浏览器都很满意。

小开

另一个廉价的黑客，似乎可以达到目的:

style="padding-bottom: 250px; margin-bottom: -250px;"表示垂直溢出被切断的元素，250表示您需要的下拉框像素，等等。

小开

我遇到这个问题时，试图建立一个固定定位侧边栏垂直可滚动的内容和嵌套绝对定位子为显示在侧边栏边界之外。

我的方法包括分别应用:

  • 添加到侧栏元素的overflow: visible属性
  • 一个overflow-y: auto属性到侧边栏内部包装器

请查看下面的示例或在线codepen。

html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, white, DarkGray 80%);
margin: 0;
padding: 0;
}


.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 200px;
overflow: visible;  /* Just apply overflow-x */
background-color: DarkOrange;
}


.sidebarWrapper {
padding: 10px;
overflow-y: auto;   /* Just apply overflow-y */
height: 100%;
width: 100%;
}


.element {
position: absolute;
top: 0;
right: 100%;
background-color: CornflowerBlue;
padding: 10px;
width: 200px;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
<div class="sidebarWrapper">
<div class="element">
I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
</div>
<p>This is a 200px width container with optional vertical scroll.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>

小开

现在有一种解决这个问题的新方法 -如果你从需要overflow-y可见的容器中删除position: relative，你可以有overflow-y可见和overflow-x隐藏，反之亦然(有overflow-x可见和overflow-y隐藏，只是确保容器与可见属性不是相对定位)。

查看这篇来自CSS技巧的文章获得更多细节-它对我有用:https://css-tricks.com/popping-hidden-overflow/

小开

一个小的“hack”;如果你只想让第一行可见(但仍然需要溢出)，这是非常有效的:

将间隙设置得很高，这样你就可以确定第二行被推出屏幕-例如:

gap: 10000rem;

它真的很俗气，但对于需要溢出菜单的桌面导航之类的东西非常有用。

小开

对于我的用例，将overflow-x:visible; overflow-y:clip添加到有溢出的div上，似乎给了我在Y轴上隐藏溢出的预期效果，而不是在X轴上给我一个滚动条(我有一个旋转滑块，在加载图像之前再次缩放它们，这些图像在加载时占据了页面高度的75%，因此不需要overflow-y)。

不需要父包装器div，只需要在溢出元素上设置一个固定的height。我知道这个方法可能并不适用于所有人，但肯定能帮助到一些人。

小开

我也面临着同样的问题，下面的解决方案工作(样式应用于父块)

overflow-y: visible;
overflow-x: clip;

提交答案