设置overflow-x: hidden会添加一个垂直滚动条。

Question

设置overflow-x: hidden会添加一个垂直滚动条。

80

当我在一个元素上指定overflow-x: hidden，而该元素在水平和垂直方向上都溢出时，该元素除了隐藏水平溢出内容外，还会出现垂直滚动条。我尝试添加overflow-y: visible甚至只是overflow: visible，但没有效果。

我是否误解了这些属性的作用？我认为overflow-x根本不应影响垂直溢出。

这在我尝试过的所有浏览器中都发生了。

这是一个演示效果的片段。我使用<pre>标签，因为它们是创建溢出内容的简单方法，但似乎任何标记都会发生这种情况。

pre {
  height: 40px;
  width: 150px;
  margin-bottom: 50px; /* We need this so they don't overlap. */
}

#x-hidden {
  overflow-x: hidden;
}

#y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

#visible {
  overflow: visible;
  overflow-x: hidden;
}

<pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="x-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="y-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

W3C规范指出：

“overflow-x”和“overflow-y”的计算值与其指定值相同，但某些与“visible”组合的情况是不可能的：如果一个被指定为“visible”，而另一个被指定为“scroll”或“auto”，则“visible”将被设置为“auto”。

但是，这并没有提到当overflow-x或overflow-y设置为hidden时的情况，这意味着我认为这种组合确实是可能的。

- Rose Kunkel

3

你可以在jsfiddle.net上粘贴一些示例代码 :) - salmatron

x 轴 = 水平。y 轴 = 垂直。 - MarioRicalde

我刚遇到了这个问题。我们的设计师想要创建“流动”的图形，使其超出右边缘。因此，我允许图像溢出容器div，但是我设置了全宽行的overflow hidden来剪切图像并防止整个页面出现水平滚动条。问题在于，我还有一个.row::after元素，它创建一个阴影并使用绝对定位将其推到行下方，而overflow hidden会隐藏它。overflow-x hidden; overflow-y:visible会创建一个滚动条。我希望x能够剪切，y能够溢出而不出现滚动条。与发帖者的问题类似。 - Dustin Graham

很不幸，我使用了嵌套的div来用overflow hidden剪裁图像。然后父div不需要overflow hidden，因此没有滚动条，同时允许父div向下推.row ::after元素。 - Dustin Graham

2022年10月，我刚遇到了这个问题，但是链接的答案和文章都没有解决方案。我想要overflow-x-hidden并显示Y轴，但它却添加了一个滚动条。最终我加上了overflow-x-CLIP。现在问题已经解决了。 - maiakd

显示剩余2条评论

10个回答

7

尝试设置您的高度。可以将其设置为100％或自动。检查此链接：jsfiddle。

    height: auto;

- Joe

1

这对我有用。body { height: auto; overflow-x: hidden; } 谢谢。 - Jake

1

请注意，在某些设备（iPad、iPhone，不确定是哪一个）上，Safari 仍然允许在 overflow-x 设置为 body 时进行水平滚动。通常我会创建带有 overflow-x 隐藏的内部 div。https://stackoverflow.com/questions/37697922/horizontal-scroll-mac-safari-only - ints

7

仅一个小时前，我遇到了类似的问题，只不过当我将overflow的值指定为auto时出现了问题。我没有使用overflow-x或overflow-y，我只需要完全包含两个浮动在相反端点的列表。

对我有用的是将overflow的值更改为hidden。尝试一下吧。我将max-width设置为100％，而不是指定高度，我只使用了overflow：hidden。

希望这可以帮助你。

- relentless-coder

2

我遇到了同样的问题。问题在于我们试图仅在一个轴上削减溢出。即：使用 overflow-x:hidden 削减水平溢出，使用 overflow-y:visible 让某些东西悬挂在边缘上。然而，当使用这种特定的组合时，会导致滚动条显示。这就是问题所在。 - mix3d

这帮助我解决了问题。可能不适用于所有用例，但如果您可以使用 max-width: 100%，那就解决了。在我看来，应该选择这个答案。 - Blue Bot

4

试一下这个：

height: auto;
width: 100px;
overflow: hidden;

应将元素保持在100px宽度，并根据其内容在垂直方向上自动调整大小（不出现滚动条）。

- James Dinsdale

3

首先，这个示例展示了您所描述的问题。

目前我还不知道如何解决这个问题，但似乎规范在这里提示了：

‘overflow-x’和‘overflow-y’的计算值与其指定值相同，除非某些与‘visible’组合不可能：如果其中一个被指定为‘visible’，另一个被指定为‘scroll’或‘auto’，则将‘visible’设置为‘auto’。

- Danield

1

只需在具有大小约束的包装器div上使用overflow：hidden。今天匆忙中请原谅我的格式。

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>

<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

在这里可以看到它的实际运用：http://jsfiddle.net/4PZC9/

- tremor

-1

尝试设置 display 属性？overflow 声明适用于块级元素！

- Kraken

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以在自己的帖子上发表评论，并且一旦您拥有足够的声望，您将能够评论任何帖子。 - Martin J.

那怎么不是一个答案呢？！ - Kraken

这是一个辅助性问题，其后跟有一条评论。http://stackoverflow.com/help/how-to-answer 将会给你提供几个指引，告诉你如何提供好的回答。 - Martin J.

4

我明白了…你无法解释为什么这不是一个回答，因为它实际上就是一个回答。 - Kraken

-3

试一下这个，

height: auto;
overflow:hidden;

干杯。

- user3482296

1

滚动条需要固定高度。 - SagarPPanchal

-3

也许你误解了什么，我没有理解问题...或者问题不在溢出设置上。 Overflow: auto 只有在需要时（内容大于容器）才会添加滚动条。 Òverflow: visible 将添加滚动条。 Òverflow: hidden 不会添加滚动条。

我理解你想要隐藏 x-内容，所以使用 overflow-x: hidden，但从你的问题中，似乎你不想看到垂直溢出的内容的垂直滚动条。

也许问题是为容器设置了固定高度（或最大高度），而内容更大。删除高度（或最大高度），就可以避免垂直滚动条。

...或者，就像我可能说过的那样，只是没有理解所需的效果。

- miguel-svq

-7

阅读您的问题...我没有看到任何问题...

当我在元素上指定overflow-x:hidden;时，它会添加一个垂直滚动条。

如果它在高度上溢出（正如您刚才所说），那么这是很正常的。

我尝试添加overflow-y:visible;甚至只是overflow:visible，但没有效果。

好吧...这很正常，因为您告诉它显示一个垂直滚动条，而已经有了一个。

正如kuloir所说：X = 水平；Y = 垂直。

- RobinJ

2

我并没有让它添加垂直滚动条，那应该是overflow-y:scroll。我只是让它简单地出现在其框外面，但它却添加了一个滚动条。Overflow-x:hidden应该隐藏任何水平溢出的内容，它确实做到了，但它也添加了一个垂直滚动条，这意味着它也影响了垂直溢出。 - Rose Kunkel

3

我也遇到了同样的问题。这个问题 https://dev59.com/NWw15IYBdhLWcg3wv-VM 解释了为什么会这样，但我仍然没有找到解决方法。你有什么办法吗？请分享一下。 - Russell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unruthless · Accepted Answer

看看这个与之相关的问题的答案：https://dev59.com/NWw15IYBdhLWcg3wv-VM#6433475

它解释了为什么。

el {
  overflow-x: hidden;
  overflow-y: visible;
}

呈现为

el {
  overflow-x: hidden;
  overflow-y: auto;
}

通常与之呈现相同的方式。

el {
  overflow-x: hidden;
  overflow-y: scroll;
}

因为在大多数浏览器中，overflow-y 属性的 auto 值是 scroll，所以为了实现这个效果，我们不能使用 overflow-x/overflow-y 属性。我尝试过使用 clip 属性作为可能的替代方案，但是目前还没有成功： http://jsfiddle.net/qvEq5/。