DIV滚动条
DIV滚动条
所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。
<DIV style="PADDING-RIGHT:10px;OVERFLOW-Y:auto;PADDING-LEFT:10px;SCROLLBAR-FACE-COLOR:#ffffff;FONT-SIZE:11pt;PADDING-BOTTOM:0px;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;OVERFLOW:auto;WIDTH:510px;SCROLLBAR-SHADOW-COLOR:#919192;COLOR:blue;SCROLLBAR-3DLIGHT-COLOR:#ffffff;LINE-HEIGHT:100%;SCROLLBAR-ARROW-COLOR:#919192;PADDING-TOP:0px;SCROLLBAR-TRACK-COLOR:#ffffff;FONT-FAMILY:宋体;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;HEIGHT:200px;TEXT-ALIGN:left">
滚动条相关颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
tack-color：滑道颜色
滚动条属性：
overflow：auto为自动，yes为有，no为无
overflow-x：横向滚动条
overflow-y：纵向滚动条
-------示例--------
可以使用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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="div1">产品简介| 详细评价 | 差评</div>
<div style=" border:1px solid #cccccc; padding:10px" id="div2">
<p>这里是你要显示的内容
这里是你要显示的内容 </p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容</p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
<p>这里是你要显示的内容 </p>
</div>
</body>
</html>
<script type="text/javascript">
fn();
function fn(){
if( parseInt($('#div2').height()) > 475)
{
$('#div2').css("overflow-y","auto");
$('#div2').css("height","475px");
}
}
</script>
