[英]How to create a scrolling DIV without cropping overflow-x?
I have a DIV that is only supposed to scroll vertically. 我有一个只能垂直滚动的DIV。 I would like to have an element inside this DIV overflow horizontally without being cropped.
我想在这个DIV内部有一个元素水平溢出而不被裁剪。 This is the desired effect:
这是期望的效果:
I thought that if I only specified overflow-y:scroll
, it would only crop the vertical overflow. 我想如果我只指定
overflow-y:scroll
,它只会裁剪垂直溢出。 However, I was wrong and this is what really happens: 但是,我错了,这才是真正发生的事情:
CSS: CSS:
ol {
border: 1px solid red;
overflow-y: scroll;
height: 20em;
width: 7em;
}
JSFiddle: 的jsfiddle:
Interesting question! 有趣的问题! I thought you just had to specify the
overflow-x
as visible
, but after trying I found out I was wrong. 我以为你只需要将
overflow-x
指定为visible
,但在尝试之后我发现我错了。 I've never came across such a situation, so I did some research. 我从未遇到过这样的情况,所以我做了一些研究。
Here is what the W3C spec says (emphasis mine): 这是W3C规范所说的(强调我的):
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' .
'overflow-x'和'overflow-y'的计算值与它们的指定值相同,除了某些与'visible'的组合是不可能的: 如果一个被指定为'visible'而另一个被指定为'scroll'或'自动',然后'可见'设置为'自动' 。
I don't know what's the rationale behind this spec , but apparently that is not a bug, but a feature :). 我不知道这个规范背后的基本原理是什么,但显然这不是一个bug,而是一个功能:)。
However, I have tested by setting the overflow-x
to visible
and the overflow-y
to hidden
and it still sets my overflow-x
to auto
(which is the scrolling behavior), in Chrome 25. I believe this might be a bug. 但是,我已经测试过
overflow-x
设置为visible
而overflow-y
为hidden
,它仍然将我的overflow-x
为auto
(这是滚动行为),在Chrome 25中。我相信这可能是一个错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.