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


454

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

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一探究竟。


您想要的结果是什么?jsfiddle.net/Kyle_Sevenoaks/3xv6A/2
Kyle

@kyle应该看起来更像:jsfiddle.net/3xv6A/5不幸的是,如果我设置了overflow-x hidden;它,它会除去滚动,但是由于我需要li元素来隐藏底部的边框,因此可以提供所需的虚线效果。我不明白为什么要overflow-x: visible创建滚动条。它不应该是afaik。
James Khoury

@JamesKhoury您能详细说明一下您的解决方案吗?我真的无法使其工作
乔治·卡萨诺斯

1
@GeorgeKatsanos解决方法:jsfiddle.net/3xv6A/9依赖于父存在overflow: hidden;和在<ul>存在周围插入的孩子overflow: visible
James Khoury 2014年

@JamesKhoury您认为它可以用于embed.plnkr.co/2rbaISwvzuKhyPEFpBKD
George Katsanos 2014年

Answers:


678

经过一番认真的搜索之后,看来我已经找到了问题的答案:

来自:http : //www.brunildo.org/test/Overflowxy2.html

在Gecko,Safari,Opera中,与“隐藏”组合时,“可见”也变为“自动”(换句话说:当与“可见”以外的其他任何东西组合时,“可见”变为“自动”)。其中的Gecko 1.8,Safari 3,Opera 9.5非常一致。

也是W3C规范说:

“ overflow-x”和“ overflow-y”的计算值与它们的指定值相同,除了不可能与“ visible”进行某些组合:如果将一个指定为“ visible”而另一个指定为“ scroll”或“自动”,然后将“可见”设置为“自动”。如果“ overflow-y”相同,则“ overflow”的计算值等于“ overflow-x”的计算值;否则为“ overflow-x”和“ overflow-y”的一对计算值。

简洁版本:

如果您将visible用作overflow-xoverflow-yvisible用作其他以外的东西,则该visible值将解释为auto


263
我知道W3C是以这种方式指定的,但是其背后的动机是什么?我发现它的行为很奇怪和不一致,导致杂乱的解决方法需要添加一些琐碎的HTML元素。
Erwin 2012年

21
@Erwin我同意,希望有人决定更新规范。
James Khoury 2012年

123
你是对的,但这没有任何意义。您甚至想要x和y的最常见原因是,您可以隐藏一个,另一个显示。
rescuecreative 2014年

91
这真是残酷。为什么overflow-x:visibleoverflow-y:hidden没有父母/孩子入侵的情况下我们不能允许?IMO,真不错。
2014年

34
这完全是残废的。我试图使Bootstrap导航栏中的下拉列表链接水平滚动,但这打破了依赖的下拉列表overflow-y: visible。嘘CSS!
安迪

130

另一个廉价的技巧,似乎可以解决问题:

style="padding-bottom: 250px; margin-bottom: -250px;"在垂直溢出将被截断的元素上,250表示下拉菜单所需的像素数,依此类推。


6
非常感谢,虽然这感觉很棘手,但似乎是解决问题的最佳方法。CSS中的溢出非常可怕:(
Serge Eremeev

11
这使水平滚动条显得
很低

2
这还会阻止元素下方250px的指针事件。但是我找到了解决方法,而这种解决方案正是我所使用的。
克里斯·楚兹基

2
2年后,这似乎仍然是解决此问题的最佳方法...希望通过另一个浏览器(Microsoft Edge)跳到Chromium开源项目中,我们将看到重要的浏览器功能的更快开发以及更好的浏览器兼容性。
Spencer O'Reilly,

在我的特殊情况下,position: relative无法删除或使用包装器,这是唯一有效的解决方案,尽管它确实还要求在我要设置的元素内的子元素上添加很多难看的边距,overflow-x: hidden以补偿这些问题。填充。但是,这救了我,谢谢!
菲利普·斯特拉特福德

81

我最初找到了一种使用Cycle jQuery插件时绕过此问题的CSS方法。Cycle使用JavaScript将幻灯片设置为overflow: hidden,因此在将图片设置为图片时width: 100%,图片看起来会被垂直切割,因此我强制将它们显示为,!important并避免在我设置overflow: hidden为的容器div 的框外显示幻灯片动画。滑动。希望对你有效。

更新-新解决方案:

原始问题 -> http://jsfiddle.net/xMddf/1/ (即使我使用overflow-y: visible它也变成了“自动”,实际上是“滚动”。)

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

新的解决方案 - > http://jsfiddle.net/xMddf/2/ (我发现采用一种解决方法包装 div来应用overflow-xoverflow-y不同的DOM元素作为詹姆斯Khoury的建议相结合的问题visible,并hidden为单个DOM元素。)

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

12
这如何适用?它似乎不适用于overflow-x或overflow-y。
James Khoury

1
@Macumbaomuetre清楚一点,谢谢+1。它类似于我添加的“更新”。最初,我无法更改包装div,而我的解决方案最终类似于:jsfiddle.net/3xv6A/338
James Khoury

9
此解决方案不适用。问题是overflow-x:visible;overflow-y:hidden。并非相反。
Jakobovski15年

1
@TomasJansson @Edward它的确起作用,您只需要在应用overflow-xand和-yupdated fiddle的地方进行交换。
只是一名学生

1
一旦包装器由于某种原因获得宽度,此操作将失败-jsfiddle.net/ad1941k9/16
David Meister

10

在尝试构建具有垂直可滚动内容和嵌套的绝对定位子项显示在侧栏边界之外固定位置的侧栏时,我遇到了这个问题。

我的方法包括分别适用:

  • 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>


2
我很确定这与其他人提出的解决方案相同,只是使用auto代替hidden
James Khoury

@JamesKhoury但这是我唯一能理解的一个,因为它指出了position
Guichi

7

我使用了这种content+wrapper方法... 但是我做的事情与到目前为止所提到的有所不同:我确保包装器的边界不在我希望可见的方向上与内容的边界对齐

重要提示:这是很容易够得着content+wrapper, same-bounds的工作方式在一个浏览器或其他取决于各种CSS组合positionoverflow-*等等...但我从来没有使用这种方法,让他们所有正确的(边,铬,野生动物园。 ..)。

但是当我有类似的东西:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

...所有浏览器都很高兴。


5

现在,有一种解决此问题的新方法 -如果您删除了位置:需要从容器中看到需要相对于溢出Y的相对位置,您可以让相对可见的Y溢出和不可见的X处于隐藏状态,反之亦然。 x可见且溢出-y隐藏,只需确保具有visible属性的容器没有相对放置即可。

有关更多详细信息,请参阅CSS Tricks上的这篇文章-它对我有用https//css-tricks.com/popping-hidden-overflow/


2
但是,如果它是绝对的,那将需要一些JavaScript才能正确
放置
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.