`
xkahala
  • 浏览: 49722 次
  • 性别: 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
分享到:
评论

相关推荐

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    滚动条下拉DIV固定在头部不动

    标题“滚动条下拉DIV固定在头部不动”指的是在网页设计中实现的一种特效,当用户滚动页面时,某个特定的DIV元素(例如一个导航栏)会保持在屏幕顶部,即使页面其他部分向下滚动,这个元素依然固定在视口的顶部。...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上,开发一款手机版浏览器时,可能会遇到一个常见的问题:在特定情况下,网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    随滚动条移动的DIV层

    ### 随滚动条移动的DIV层:实现与解析 #### 一、概述 在网页设计与开发过程中,为了提高用户体验以及页面的交互性,常常会遇到需要制作一个随滚动条移动的元素(如提示框、广告栏等)。本文将通过分析一段具体的...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    一款好看的DIV+CSS滚动条

    因此,利用CSS,我们可以自定义滚动条的颜色、形状、宽度以及滑块等元素,使其与网页整体风格相协调。 这款滚动条设计的优点在于它的易用性和可修改性。即使是初学者也能尝试调整,这主要得益于CSS的灵活性。下面是...

    div滚动条样式一览-div+css设计网

    而当这些`div`元素中的内容超出其设定的宽度或高度时,滚动条就会出现,以帮助用户浏览不可见的部分。在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、...

    使用div做滚动条

    所谓DIV滚动条,是指在一个固定宽度和高度的`&lt;div&gt;`元素内部添加垂直或水平滚动条,以便于显示超出该区域的内容。这种方法非常适合于在网页上展示大量文本、图片或列表等信息时使用,能够在不增加页面整体尺寸的情况...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的...

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    利用div+jquery自定义滚动条

    在网页设计中,有时我们可能需要对滚动条进行个性化定制,使其与网站整体风格保持一致。"利用div+jquery自定义滚动条"这个主题就是关于如何通过HTML的div元素和jQuery库来实现这一目标的。下面我们将深入探讨这个...

    jquery使用div实现滚动条效果

    在这个例子中,我们创建了一个具有固定高度和垂直滚动条的div,然后使用`.scroll()`方法监听滚动事件。当用户滚动div时,我们可以执行自定义的JavaScript代码,比如更新其他元素的状态或者执行动画效果。 除了基本...

    div跟随水平滚动条移动

    div或其他html块内容跟随滚动条移动,滚动移动时,内容跟着移动,并保持最右边

Global site tag (gtag.js) - Google Analytics