div横向滚动条_纵向滚动条对横向滚动条的影响

GUI编程中，往往有这样一个场景，在一个长、宽固定的组件中，显示一系列的子组件。

我最近发现了各平台在这种场景下，对纵向、横向滚动条处理的一些差异，分享出来给大家。

比如在网页上构建这样一个组件：

对应的代码如下：

<

先看横向:父元素的宽度是200，每一个子元素的宽度也都是200，所以即使父元素指定了overflow:auto,也不会出现横向滚动条。

再看纵向：父元素的高度是220，每个子元素的高度是30，那么所有子元素的高度之和30*7=210是小于父元素的，所以也没有出现纵向滚动条，甚至我们还能看到最下面灰色的部分，那是父组件的220减去子组件高度之和210富余出来的部分。

下面考虑一个变化，如果父元素的高度变成200了，小于子组件高度之和的210了，会怎么样？

因为父组件overflow：auto的存在，一定会出现纵向滚动条的。那么会不会出现横向滚动条呢？

我们看到Firefox和IE(9),都出现了横向滚动条，为什么呢？

对父组件来说，现在每一行除了子组件还要显示一个纵向滚动条。也就是说，父组件要显示的内容是：宽度为200的子组件+宽度为13的纵向滚动条。

而父组件的预设宽度是200，显示不下宽度为213的内容，根据overflow：auto的设定，它显示了横向滚动条。

相比于其它浏览器的因纵得横，我们看到Chrome没有显示横向滚动条，看起来横向滚动条似乎是悬浮在文字之上的，并且盖住了子组件的文字。

最后我们看一下JavaFx是怎么处理这种情况的：它在初始化的时候，和Chrome一样，但是在拉动滚动条进行重新计算的时候，又出现了像Firefox的行为。

不管如何，对于因纵得横的问题，建议在开发的时候，给父子之间多留一些余地，父组件的宽度至少要大于子组件一个滚动条的宽度，毕竟，做父亲的要大度一些。