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

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

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

在 Gecko、Safari、Opera 中，当与“隐藏”组合时，“可见”也变为“自动”（换句话说：当与“可见”不同的任何其他内容组合时，“可见”变为“自动”）。 Gecko 1.8、Safari 3、Opera 9.5 非常一致。

W3C spec 还说：

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

精简版：

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

---

另一个便宜的黑客，这似乎可以解决问题：

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

---

在使用 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;
}

---

我在尝试构建一个固定位置的侧边栏时遇到了这个问题，该侧边栏既包含垂直滚动的内容，又包含嵌套的绝对定位子项以显示在侧边栏边界之外。

我的方法包括单独应用：

溢出：侧边栏元素的可见属性

一个溢出-y：侧边栏内部包装的自动属性

请检查以下示例或 online codepen。

html { 最小高度：100%; } 身体 { 最小高度：100%;背景：线性渐变（到底部，白色，深灰色 80%）；边距：0；填充：0； } .sidebar { 位置：固定；顶部：0；右：0；高度：100%；宽度：200px；溢出：可见； /* 只需应用overflow-x */ background-color: DarkOrange; } .sidebarWrapper { 填充：10px;溢出-y：自动； /* 只需应用overflow-y */ height: 100%;宽度：100%； } .element { 位置：绝对；顶部：0；正确：100%；背景颜色：矢车菊蓝；填充：10px；宽度：200px； }

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illoinvente 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？

---

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

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

---

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

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

---

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

重要说明：根据 position、overflow-* 等的各种 CSS 组合，在一个或另一个浏览器上使用 content + wrapper、same-bounds 方法很容易，但我永远无法使用这种方法让它们全部正确（Edge、Chrome、Safari 等）。

但是当我有类似的东西时：

#hack_wrapper { 位置：绝对；宽度：100%；高度：100%；溢出-x：隐藏； } #content_wrapper { 位置：绝对；宽度：100%；高度：15%；溢出：可见； }

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

---

我遇到了同样的问题，以下解决方案有效（样式应用于父块）

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

---

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

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

gap: 10000rem;

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

---