`
xkahala
  • 浏览: 48628 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

div层滚动条 与 div列表头固定

阅读更多

       今天修理一bug ,  jsp页面是不分页的,默认是显示所有记录,所以当数据量很大的情况下,列又多,拉到下面的时候根本不知道哪一列是啥意思,所以需求就是,列表头要一定要显示在页面上部,不管下拉多少记录。

        思路一: 也是最麻烦的;

                     把列表头放在一个div中,利用JS触发滚动条事件,不断的修正div所在位置。

function mymove()
  { 
   mydiv.style.top=document.body.scrollTop // 改变a的值,将改变浮动图层离上边界的距离
   mydiv.style.left=0
   setTimeout("mymove();",1) // 这个函数设置的是浮动图层移动的时间,张二个参数越大,移动得越慢。
  }

 

<BODY onload="mymove();">//加载onload事件

 

 <script language=javascript>
{
document.write("<div id='mydiv'  style=' position: absolute; width:100%;top:100;left:0;visibility: visible;z-index: 1'><table id='ec_table' border='1'  cellspacing='0'  cellpadding='0'   width='100%'> <tr>tr></table></div>");
mymove() }
</script>

 

但是有个缺点:  当滚动条下拉或者上拉的时候, 表头不断在闪,效果不好

 

思路二:

表头不动,将要加载的记录放在一个div,并且设置这个div的滚动条,还有取消body的滚动条  这个效果很好;呵呵 而且很简单。

<div   style="OVERFLOW-Y: auto;OVERFLOW-X: hidden; HEIGHT: 563px">

<body  style="overflow: hidden ">

OK搞定 呵呵

 附div滚动条属性说明:

     overFlow:  hidden || auto|| scroll 滚顶条 hidden为隐藏;auto为记录超过页面时自动开启滚动条滑块;     scroll        始终显示滚动条不管是否溢出

 overFlow-x: scroll ;横向滚动条
 overFlow-y: hidden ;     纵向滚动条

/*   滚动条相关的颜色属性 */
     scrollBar-face-color: green;        /* 滑块颜色 */
     scrollBar-hightLight-color: red;    /* 高亮颜色 */
     scrollBar-3dLight-color: orange;    /* 3维光线颜色 */
     scrollBar-darkshadow-color:blue;    /* 暗影 颜色   */
     scrollBar-shadow-color:yellow;      /* 阴影 颜色  */
     scrollBar-arrow-color:purple;       /* 箭头 */
     scrollBar-track-color:black;         /* 滑道颜色 */
     scrollBar-base-color:pink;          /* 主要颜色 */
 


 


 

 

 

0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics