最近公司做项目,我负责的模块中显示的列表信息太多(细数了下,共有25+列),刚开始不知道怎么弄滚动条,然后也没去网上搜,因此就把这25列数据调整列宽后凑合在一起了。由于公司屏幕分辨率很大,所以一屏也能显示出来,此后也就忘了滚动条的问题。但这样固定列宽的情况,在项目开发过程中难免会遇到数据量过长时造成排版变乱。由于不知道怎么用滚动条,所以一直就处于 调整列宽-排版乱-调整列宽-排版乱...的循环中,因此也浪费了很多时间。
正好今天周末,在家没事,就用自己的电脑运行项目,由于本本分辨率本来就小,因此当页面显示出来的时候,我直接“我嘞个擦~~!”了。被自己吓一跳:“这tm什么玩意!!这tm简直就是万花筒啊~~!!”,至于样式,自己脑补吧。唉,这样等到项目上线时肯定不行!改吧~~!!(进入正题.....)
刚开始真的无从下手,一次次调整列宽,一次次推翻自己,当时脑子都要炸了~~!到了最后也没有调整到自个心仪的标准,最后只能上论坛了--CSDN。结果大神一句话就把我折服了:
body { width: 2000px; }
就这么简单!直接固定好body的宽度就行,只要当前屏幕的分辨率显示宽度小于这个值得话,就会自动填充x轴滚动条。
随后又扫尾看了看滚动条的手动设置:如下
<style type="text/css"> <!-- body { width:2000px; overflow-x:auto; overflow-y:auto; } --> </style>
overflow-x:x轴,auto为显示,如果改为hidden的话就会隐藏滚动条,y轴的同理。
最后大功告成!心情顿时轻松了!!
相关推荐
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度,需要的朋友可以参考下
保持页面滚动条位置的javascript代码
页面布局有滚动条 页面布局有滚动条 页面布局有滚动条
WPF的scrollview滚动条设置,包括上一页下一页上一条吓一条设置
js 特效 html 特效 去掉页面的滚动条 js 特效 html 特效 去掉页面的滚动条
滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改
vue自定义浏览器滚动条(已兼容ie)
iframe的滚动条问题:显示隐藏滚动条.doc
mobile上当页面内容过多时,可使用iscroll.js为页面添加的滚动条。
页面滚动条,滚动条(JScrollBar)也称为滑块,用来表示一个相对值,该值代表指定范围内的一个整数。例如,用Word编辑文档时,编辑窗右边的滑块对应当前编辑位置在整个文档中的相对位置,可以通过移动选择新的编辑位置...
主要获取鼠标在页面上的位置,包括当页面有滚动条的时候。。
javascript 获取滚动条高度 页面宽度 页面高度 教程
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值,如果这个值大于某个特定的数字...
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
去掉页面的滚动条.rar去掉页面的滚动条.rar去掉页面的滚动条.rar去掉页面的滚动条.rar去掉页面的滚动条.rar去掉页面的滚动条.rar
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
有时我们需要禁用控件本身的滚动,统一使用外部滚动条。使用方式 <behaviors:PreviewMouseWheelHandledBehavior></behaviors:PreviewMouseWheelHandledBehavior> </i:Interaction.Behaviors>
jQuery单页面滚动点击顶部导航条页面滚动到设置的描点位置
angular6,div 滚动条判断是否触底,用于滚动加载数据。