设置overflow-x：hidden会添加一个垂直滚动条 [英] Setting overflow-x: hidden adds a vertical scrollbar
问题描述
当我在水平和垂直溢出的元素上指定 overflow-x：hidden 时，除了隐藏水平溢出的内容外，元素还会获得垂直滚动条。我尝试添加 overflow-y：visible ，甚至只是 overflow：visible ，没有任何效果。
我误解了这些属性的用途吗？我认为 overflow-x 不应该影响垂直溢出。
这发生在每个浏览器上我已经尝试过了。
这是一个演示效果的片段。我使用< pre> 标签，因为它们是创建溢出内容的简单方法，但它似乎会发生在任何标签上。
pre {height：40px;宽度：150px; margin-bottom：50px; / *我们需要这个，所以它们不会重叠。 * /}＃x-hidden {overflow-x：hidden;}＃y-visible {overflow-x：hidden; overflow-y：visible;}＃visible {overflow：visible; overflow-x：hidden;}
< pre> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Praesent bibondum lorem felis，坐在amet sodales nunc gravida eget。整数分裂症是一种严重疾病。 Cras aliquet convallis efficitur。< / pre>< pre id =x-hidden> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Praesent bibondum lorem felis，坐在amet sodales nunc gravida eget。整数分裂症是一种严重疾病。 Cras aliquet convallis efficitur。< / pre>< pre id =y-visible> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Praesent bibondum lorem felis，坐在amet sodales nunc gravida eget。整数分裂症是一种严重疾病。 Cras aliquet convallis efficitur。< / pre>< pre id =visible> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Praesent bibondum lorem felis，坐在amet sodales nunc gravida eget。整数分裂症是一种严重疾病。 Cras aliquet convallis efficitur。< / pre>
href =https://www.w3.org/TR/css3-box/#overflow-x =noreferrer> W3C规范说：
'overflow-x'和'overflow-y'的计算值与它们的指定值相同，不同之处在于不可能使用'visible'的组合：如果指定为'可见'，另一个是'滚动'或'自动'，然后'可见'设置为'自动'。
但是当 overflow-x 或 overflow-y 被设置为时，没有提及这种情况。隐藏，这对我来说意味着这个组合确实是有可能的。
这个答案的相关问题： https://stackoverflow.com/a/6433475/3583023
它解释了为什么
el {
overflow-x：hidden;
overflow-y：visible;
}
呈现为
el {
overflow-x：hidden;
overflow-y：auto;
}
通常与
$ b相同$ b
el {
overflow-x：hidden;
overflow-y：scroll;
}
因为 auto 在大多数浏览器中， overflow-y 的值为 scroll 。
<因此，为了达到这个效果，我们不能使用 overflow-x / overflow-y 属性。我已经尝试过使用剪辑属性作为潜在选择，但目前还没有运气： http://jsfiddle.net/qvEq5/
When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.
Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.
This has happened on every browser I've tried.
Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.
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>
The W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023
It explains why
el {
overflow-x: hidden;
overflow-y: visible;
}
renders as
el {
overflow-x: hidden;
overflow-y: auto;
}
which usually renders the same as
el {
overflow-x: hidden;
overflow-y: scroll;
}
because the auto value of overflow-y is scroll in most browsers.
So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
这篇关于设置overflow-x：hidden会添加一个垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
