当前位置:首页 > 开发 > Web前端 > 前端 > 正文

关于页面滚动条的设置

发表于: 2015-03-21   作者:843977358   来源:转载   浏览:
摘要:        最近公司做项目,我负责的模块中显示的列表信息太多(细数了下,共有25+列),刚开始不知道怎么弄滚动条,然后也没去网上搜,因此就把这25列数据调整列宽后凑合在一起了。由于公司屏幕分辨率很大,所以一屏也能显示出来,此后也就忘了滚动条的问题。但这样固定列宽的情况,在项目开发过程中难免会遇到数据量过长时造成排版变乱。由于不知道怎么用

       最近公司做项目,我负责的模块中显示的列表信息太多(细数了下,共有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轴的同理。

   最后大功告成!心情顿时轻松了!!

关于页面滚动条的设置

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
insideOverlay  默认值,表示在padding区域内并且覆盖在view上 insideInset 表示在padding区域内并
本文简单记录一下webkit下美化滚动条的一些方式: 下面这张图比较直观,来源于互联网,不追源了,感
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度
/*滚动条设置*/ /* 设置滚动条区域*/ ::-webkit-scrollbar { width: 14px; } /* Track */ ::-webkit
1.xhtml下滚动条的颜色问题 在原来的html的时候,我们可以这样定义整个页面的滚动条: body{ scroll
(1)DIV里的table百分比宽度问题: 一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table
WebView有一个设置滚动条位置的属性:android:scrollbarStyle 可以是insideOverlay可以是outsideOver
将一下代码复制到html页面中即可查看效果。 支持IE和chrome,不支持firefox <style type="text/cs
特别鸣谢“四川省计算机研究院科技人才培训中心中国顶级RIA、嵌入式培训机构”提供图片 成都市成科
今天偶尔发现那个panel的垂直滚动条如果不做任何处理,每次获得焦点后位置老是变动。当拖动到某个位
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号