div滚动条-div 添加滚动条

一 : div 添加滚动条

//让所有的table td都展开

overflow-y: hidden; overflow-x: scroll; width: 987px //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度

例子：

<div>

<table cellspacing="0" cellpadding="0" align="center" border="2" bind="on">

<tbody>

<tr>

<td align="center" width="30">

序号

</td>

<td align="center" width="100" req="SORT,创建日期" con="CLICK">

创建日期

</td>

<td align="center" width="100" req="SORT,质量问题名称" con="CLICK">

质量问题名称

</td>

<td align="center" width="100" req="SORT,最终产品名称" con="CLICK">

最终产品名称

</td>

<td align="center" width="100" req="SORT,工作状态" con="CLICK">

工作状态

</td>

<td align="center" width="100" req="SORT,一层原因" con="CLICK">

一层原因

</td>

<td align="center" width="100" req="SORT,技术归零" con="CLICK">

技术归零

</td>

<td align="center" width="100" req="SORT,管理归零" con="CLICK">

管理归零

</td>

<td align="center" width="40" req="SORT,原件查看" con="CLICK">

原件查看

</td>

<td>

<div>

删除</div>

</td>

<td>

<div>

修改</div>

</td>

<td>

<div>

工作流</div>

</td>

<td>

备注

</td>

<td>

多数

</td>

</tr>

<tr req="REPORT,b0cfeedbe63c48a99d3b324acc5bb619,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

<td align="center">

<div title="1">

1</div>

</td>

<td align="center" width="100">

<div title="2013-01-30 14:05:12">

2013-01-30 14:05:12</div>

</td>

<td align="center" width="100">

<div title="mclk">

mclk</div>

</td>

<td align="center" width="100">

<div title="最终产品名称">

最终产品名称</div>

</td>

<td align="center" width="100">

<div title="总装测试">

总装测试</div>

</td>

<td align="center" width="100">

<div title="软件">

软件</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="40">

<div>

<div>

</div>

</div>

</td>

<td>

<div>

<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,b0cfeedbe63c48a99d3b324acc5bb619," con="UPDATE" /></div>

</td>

<td>

<div>

</div>

</td>

<td>

<div>

待修改</div>

</td>

<td>

<div>

备注数据</div>

</td>

<td>

sdddddddddddddd

</td>

</tr>

<tr req="REPORT,cd0c2c1ece774dadbb8e734db874d5e7,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

<td align="center">

<div title="2">

2</div>

</td>

<td align="center" width="100">

<div title="2013-01-22 12:23:03">

2013-01-22 12:23:03</div>

</td>

<td align="center" width="100">

<div title="质量问题名称">

质量问题名称</div>

</td>

<td align="center" width="100">

<div title="234234">

234234</div>

</td>

<td align="center" width="100">

<div title="研制阶段">

研制阶段</div>

</td>

<td align="center" width="100">

<div title="器材">

器材</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="40">

<div>

<div>

</div>

</div>

</td>

<td>

<div>

<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,cd0c2c1ece774dadbb8e734db874d5e7," con="UPDATE" /></div>

</td>

<td>

<div>

</div>

</td>

<td>

<div>

待修改</div>

</td>

<td>

备注数据

</td>

<td>

sssssdfsdfsdfsdfsdf

</td>

</tr>

<tr req="REPORT,7bfd927584094ba48e29010162b76fcb,02,a2f004335b1c4a4398706ce32b5aca6f,4,admin,,,," con="CLICK">

<td align="center">

<div title="3">

3</div>

</td>

<td align="center" width="100">

<div title="2013-01-14 11:41:38">

2013-01-14 11:41:38</div>

</td>

<td align="center" width="100">

<div title="问题">

问题</div>

</td>

<td align="center" width="100">

<div title="名称">

名称</div>

</td>

<td align="center" width="100">

<div title="发射场测试">

发射场测试</div>

</td>

<td align="center" width="100">

<div title="工艺">

工艺</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="100">

<div title="是">

是</div>

</td>

<td align="center" width="40">

<div>

<div>

<a onclick="KeyUpM(1,&#39;VIEW&#39;,&#39;METE&#39;,&#39;7bfd927584094ba48e29010162b76fcb&#39;)" href="http://localhost:6404/IcelineIar/secure/report/fullQuarterlyList.aspx?TYPE=02#">

<img alt="查看原件" src=http://up.2cto.com/2013/0312/20130312025239327.png" border="0" /></a></div>

</div>

</td>

<td>

<div>

<img alt="删除" src=http://up.2cto.com/2013/0312/20130312025239307.png" border="0" req="DEL,7bfd927584094ba48e29010162b76fcb," con="UPDATE" /></div>

</td>

<td>

<div>

</div>

</td>

<td style="border-bottom-color: #79d8f0;

width: 60px; text-align: center">

<div>

待修改</div>

</td>

<td>

备注数据

</td > www.2cto.com

<td>

eeeeeeeeeeeeeeeeeeeeeeeeeeee

</td>

</tr>

</tbody>

</table>

</div>

二 : 让DIV产生滚动条

所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。（www.61k.com）其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。

参考核心代码：

<DIV>

滚动条相关颜色属性：

face-color：滑块颜色

hightlight-color：高亮颜色

3dlight-color：三维光线颜色

darkshadow-color：暗影颜色

shadow-color：阴影颜色

arrow-color：箭头颜色

tack-color：滑道颜色

滚动条属性：

overflow：auto为自动，yes为有，no为无

overflow-x：横向滚动条

overflow-y：纵向滚动条

注意：

在论坛中，要成功使用DIV滚动条，需要在HTML编辑模式下编写代码，发布前将“自动修正”前的“√”去掉。

三 : 网页特效：随滚动条移动的DIV层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>随滚动条移动的层 - www.61k.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.61k.com">
</HEAD>
<style>
<!--
.div{
 position: absolute;
 border: 2px solid red;
 background-color: #EFEFEF;
 line-height:90px;
 font-size:12px;
 z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
 document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
 document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>

<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
 document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
 document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
 document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
 document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
 document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
 document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
 document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
 document.getElementById("Javascript.Div5").sty

四 : DIV滚动条属性

DIV滚动条就是利用DIV标签，在里面嵌入CSS样式表，当div所定义的区域的内容达到一定程度时，在div标签里面嵌入CSS样式表，定义overflow的属性值，设置DIV滚动条相关的属性。

这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。

DIV滚动条属性及样式设置

所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。

当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
示例代码：

代码如下:

<style type="text/css">
.testDiv{
border-style:solid;
border-width:50px;
border-color:pink;
position:absolute;
top:200px;
left:300px;
height:200px;
width:300px;
overFlow-x:scroll;
overFlow-y:hidden;
scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
}
</style>

注：
1.overFlow:
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条
2.DIV滚动条颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
track-color：滑道颜色
base-color：DIV滚动条的主要颜色，其中包含滚动按钮和滚动滑块
3.overFlow-xoverFlow-y
visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll总是显示滚动条
hidden没有DIV滚动条，超出区域的内容不可见
auto根据内容自动判断是否添加滚动条