GUI编程中,往往有这样一个场景,在一个长、宽固定的组件中,显示一系列的子组件。
我最近发现了各平台在这种场景下,对纵向、横向滚动条处理的一些差异,分享出来给大家。
比如在网页上构建这样一个组件:
![6271fac0eef4272c95395458a602f8b0.png](https://i-blog.csdnimg.cn/blog_migrate/fe0e44557ce07c3062aa84cc2d27d9ff.png)
对应的代码如下:
<div style="width:200px;height:220px;background-color:gray;overflow:auto">
<div style="width:200px;height:30px;background-color:red;text-align:right">苏荃</div>
<div style="width:200px;height:30px;background-color:orange;text-align:right">双儿</div>
<div style="width:200px;height:30px;background-color:yellow;text-align:right">阿珂</div>
<div style="width:200px;height:30px;background-color:green;text-align:right">建宁公主</div>
<div style="width:200px;height:30px;background-color:red;text-align:right">方怡</div>
<div style="width:200px;height:30px;background-color:orange;text-align:right">曾柔</div>
<div style="width:200px;height:30px;background-color:yellow;text-align:right">沐剑屏</div>
</div>
先看横向:父元素的宽度是200,每一个子元素的宽度也都是200,所以即使父元素指定了overflow:auto,也不会出现横向滚动条。
再看纵向:父元素的高度是220,每个子元素的高度是30,那么所有子元素的高度之和30*7=210是小于父元素的,所以也没有出现纵向滚动条,甚至我们还能看到最下面灰色的部分,那是父组件的220减去子组件高度之和210富余出来的部分。
下面考虑一个变化,如果父元素的高度变成200了,小于子组件高度之和的210了,会怎么样?
因为父组件overflow:auto的存在,一定会出现纵向滚动条的。那么会不会出现横向滚动条呢?
![b34878e71b6fc795839a71591ae50089.png](https://i-blog.csdnimg.cn/blog_migrate/11ba77a76c9c07c46f2c3f836265cc4d.jpeg)
我们看到Firefox和IE(9),都出现了横向滚动条,为什么呢?
对父组件来说,现在每一行除了子组件还要显示一个纵向滚动条。也就是说,父组件要显示的内容是:宽度为200的子组件+宽度为13的纵向滚动条。
而父组件的预设宽度是200,显示不下宽度为213的内容,根据overflow:auto的设定,它显示了横向滚动条。
相比于其它浏览器的因纵得横,我们看到Chrome没有显示横向滚动条,看起来横向滚动条似乎是悬浮在文字之上的,并且盖住了子组件的文字。
最后我们看一下JavaFx是怎么处理这种情况的:它在初始化的时候,和Chrome一样,但是在拉动滚动条进行重新计算的时候,又出现了像Firefox的行为。
![1867eddaae312cc080f7356c1b8e70a9.gif](https://i-blog.csdnimg.cn/blog_migrate/2d09d513908531403a763e8c49c1fad5.gif)
不管如何,对于因纵得横的问题,建议在开发的时候,给父子之间多留一些余地,父组件的宽度至少要大于子组件一个滚动条的宽度,毕竟,做父亲的要大度一些。