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

Question

当我指定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'或'自动',然后'可见'设置为'自动'.

但这并没有提到何时overflow-x或被overflow-y设定的情况hidden,这对我来说意味着这种组合确实是可能的.

Answer 1

查看相关问题的答案:https://stackoverflow.com/a/6433475/3583023

它解释了原因

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

呈现为

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

通常呈现相同的

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

因为大多数浏览器都有auto价值.overflow-yscroll

所以,为了达到这个效果,我们不能使用这些overflow-x/overflow-y属性.我已尝试将该clip物业作为潜在替代品,但到目前为止没有运气:http://jsfiddle.net/qvEq5/

Answer 2

尝试设置您的高度。要么让它像 100%，要么自动检查这个

提琴手

    height: auto;

Answer 3

就在一个小时前，我遇到了类似的问题，但是当我将overflow值指定为时发生了问题auto。我没有使用overflow-x或overflow-y，我只需要它完全包含漂浮在相对两端的两个列表。

对我有用的是，我将overflow值更改为hidden。试试看 我已经将设置max-width为100%，而不是指定height，而是使用overflow: hidden。

希望能有所帮助。

Answer 4

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

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

如果它溢出了它的高度（正如你刚才所说的那样），那么这是很正常的。

我尝试添加overflow-y:visible; 甚至只是溢出：可见，没有效果。

嗯...这是正常的，因为你告诉它显示一个垂直滚动条，它已经存在了。

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