antd的select的滚动条怎么才会出现_纵向滚动条对横向滚动条的影响

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

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

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

对应的代码如下：

<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的存在，一定会出现纵向滚动条的。那么会不会出现横向滚动条呢？

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

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

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

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

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

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

antd的select的滚动条怎么才会出现_纵向滚动条对横向滚动条的影响相关推荐

React中使用antd的select报错Unable to preventDefault inside passive event listener invocation.
问题描述报错Unable to preventDefault inside passive event listener invocation. React中使用antd的select报错 Unab ...
antd table横向滚动条样式自定义
总结了一份在工作中常用的antd table 滚动条样式优化的代码原样式: 优化后样式: :global { //修改框架样式关键字//表格头标题的滚动条设置// 为什么设置标题头滚动条呢,因为a ...
antd table自适应（横向滚动条）
要求是:当表格在手机上显示,并且超出显示宽度,则出现滚动条实现 table中scroll属性控制滚动条,x为横向滚动条,y纵向滚动条 scroll={{x:'max-content'}}则是自适应 ...
html页面消除横向滚动条,框架网页中去掉横向(水平)滚动条的方法
有的时候,我们可能需要在网页页面中嵌入框架页面,嵌入之后可能会由于框架页面中的页面过宽而会出现横向(水平)滚动条的现象,这样非常不便于浏览者的习惯,我们往往习惯于垂直滚动条,所以在这里向大家介绍一种框 ...
解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题
转载自:http://t.csdn.cn/dgUSi 版权声明:本文为CSDN博主「奋斗在阿尔卑斯的皮卡丘」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接 ...
Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条. 方案一:修改el-table__body-wrapper样式的层级,随便设个层级 ...
如何将横向滚动条加粗css,css实现横向滚动条的两种方式（代码实例）
本章给大家介绍用css实现横向滚动条的两种方式.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html代码: 全部 Adobe 微软会计绘画 Adobe 微软会计绘画一. ...
datatable无法设置横向滚动条(设置无效)
datatable设置横向滚动条无效 js如下: 页面如下: 设置 scrollx 属性为true时,还需在 table 添加 style="white-space: nowrap; &qu ...
html页面不显示横向滚动条,css横向滚动条不显示？
在html页面开发时,我们经常会使用到css来设置页面的样式,当页面出现横向滚动条时,用css怎么将其清除掉?下面我们来看一下css设置横向滚动条不显示的方法. css可以通过为元素添加overflo ...
滚动条的值如何赋值_如何给Word文本框添加滚动条？史上最详细步骤
在工作中我们经常需要使用Microsoft Word来进行编辑文件等,而Microsoft Word也总是能给我们许多的惊喜,因为它总能帮助我们去解决许多工作上的问题.当有些小伙伴不再是局限于仅仅使用 ...

antd的select的滚动条怎么才会出现_纵向滚动条对横向滚动条的影响

antd的select的滚动条怎么才会出现_纵向滚动条对横向滚动条的影响相关推荐

最新文章

热门文章