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>