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

Question

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

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 周围添加另一个元素。 Check it out.

Answer 1

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

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

在 Gecko、Safari、Opera 中，“可见” 与 “隐藏”（换句话说：“可见” 结合使用时变为“自动” 其他任何不同的东西 '可见的'）。 Gecko 1.8、Safari 3、Opera 9.5 之间非常一致。

W3C spec 也说：

‘overflow-x’的计算值 和'overflow-y'和他们的一样 指定的值，除了一些 与“可见”的组合不是 可能的：如果一个被指定为 “可见”，另一个是“滚动”或 “自动”，然后“可见”设置为 '汽车'。的计算值 “溢出”等于计算的 如果“溢出-y”，则“溢出-x”的值 是一样的；否则就是一对 'overflow-x' 的计算值和 ‘溢出-y’。

短版：

如果您将visible 用于overflow-x 或overflow-y，而将visible 以外的其他值用于另一个，则visible 值将被解释为auto。

Answer 2

另一个廉价的黑客，似乎可以解决问题：

style="padding-bottom: 250px; margin-bottom: -250px;" 位于垂直溢出被截断的元素上，250 代表下拉列表所需的尽可能多的像素，等等。

Answer 3

我最初在使用 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/ （我发现了一种解决方法，使用 wrapper div 将 overflow-x 和 overflow-y 应用于不同的 DOM 元素，因为 James Khoury 建议将 visible 和 hidden 组合到单个 DOM 的问题元素。）

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

Answer 4

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

我的方法包括单独申请：

• 侧边栏元素的overflow: visible 属性
• 侧边栏内部包装的 overflow-y: auto 属性

请查看以下示例或online 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>

Answer 5

现在有一种解决此问题的新方法 - 如果您从需要使溢出-y 可见的容器中删除position: relative，则可以使溢出-y 可见和溢出- x 隐藏，反之亦然（overflow-x 可见，overflow-y 隐藏，只要确保具有 visible 属性的容器没有相对定位即可）。

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

Answer 6

我使用了内容 + 包装器的方法...但是我做了一些与目前为止提到的不同的事情：我确保我的包装器的边界不与内容的边界在我希望可见的方向。

重要提示：根据position、overflow-* 等的各种 CSS 组合，在一个或另一个浏览器上使用内容 + 包装器、相同边界的方法很容易，但我永远不会使用使它们全部正确的方法（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>

...所有浏览器都很满意。

Answer 7

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

不需要父包装 div，只需在溢出元素上设置一个固定的height。我意识到这个解决方案可能并不适合所有人，但它肯定可以帮助一些人。

Answer 8

如果您只希望第一行可见（但仍需要溢出），那么一个小“hack”效果很好：

将间隙设置得非常高，以便您确定第二行被推出屏幕 - 例如：

gap: 10000rem;

它真的很hacky，但非常适合带有需要溢出菜单的桌面导航之类的东西......