div滚动条样式设计

这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦

例1：

 

代码列表从左边到右边（上到下）
（1）

<div style=" 120; height: 140; background-color: #0000c6; overflow: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div>

（2）

track-color:#ffff33; scrollbar-darkshadow-color:#ffff33; scrollbar-face-color:#ff0033; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff0033">
文字内容
</div>

（3）

<div style=" 120; height: 140; overflow: scroll; scrollbar-3dlight-color:#ff0033; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffff33; scrollbar-darkshadow-color:#ffff33; scrollbar-face-color:#ff0033; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff0033">
文字内容
</div>

（4）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: eaecec; scrollbar-highlight-color: eaecec; scrollbar-shadow-color: black; scrollbar-3dlight-color: eaecec; scrollbar-arrow-color: eaecec; scrollbar-track-color: ffffff; scrollbar-darkshadow-color: eaecec">
文字内容
</div>

（5）
 

<div style=" 120; height: 140;overflow: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#cfcfcf; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#cfcfcf; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#595959">
文字内容
</div>

（6）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #d2e5f4; scrollbar-highlight-color: #d2e5f4; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #d2e5f4">
文字内容
</div>

（7）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div>

（8）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-face-color: #59adbb; scrollbar-track-color: #ffffff; scrollbar-3dlight-color: #59adbb; scrollbar-darkshadow-color: #59adbb">
文字内容
</div>

（9）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #ffc300; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #ffc300; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffc300">
文字内容
</div>

（10）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-3dlight-color:5a5227; scrollbar-arrow-color:fff8c5; scrollbar-base-color:ddd38d; scrollbar-darkshadow-color:fff8c5; scrollbar-face-color:ddd38d; scrollbar-highlight-color:fff8c5; scrollbar-shadow-color:5a5227">
文字内容
</div>

（11）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #9ebfe8; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #9ebfe8; scrollbar-darkshadow-color: #9ebfe8; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div>

（12）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #db52bc; scrollbar-shadow-color: #e994d6; scrollbar-highlight-color: #e994d6; scrollbar-3dlight-color: #db52bc; scrollbar-darkshadow-color: #db52bc; scrollbar-track-color: #e994d6; scrollbar-arrow-color: #ffffff">
文字内容
</div>

（13）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</div>

（14）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #cccccc">
文字内容
</div>

（15）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color:#ffc4e1; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#ff95ca; scrollbar-darkshadow-color:#ffb5da; scrollbar-shadow-color:#ff6ab5; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffddee">
文字内容
</div>

（16）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #dbebfe; scrollbar-shadow-color: #b8d6fa; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #dbebfe; scrollbar-darkshadow-color:#458ce4; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #458ce4">
文字内容
</div>

（17）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #885c10; scrollbar-highlight-color: #f8ecd8; scrollbar-3dlight-color: #885c10; scrollbar-darkshadow-color: #f8ecd8; scrollbar-track-color: #f8ecd8; scrollbar-arrow-color: #885c10">
文字内容
</div>

（18）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</div>

（19）
 

<div style=" 120; height: 140; overflow: scroll; scrollbar-face-color: #fddee8; scrollbar-shadow-color: #fddee8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #fdcfdd; scrollbar-darkshadow-color: #fdcfdd; scrollbar-track-color: fff6f9; scrollbar-arrow-color: #fea6c0">
文字内容
</div>

例2：

  

<!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>带滚动条的Div</title>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
p{
margin-top:0px;
}
#dhtmlgoodies_scrolldiv{
530px;
height:500px;
}
#scrolldiv_parentContainer{
500px;
height:100%;
overflow:hidden;
border:1px solid #BC8FBD;
float:left;
position:relative;
}
#scrolldiv_content{
padding: 5px;
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size: 0.9em;
line-height:130%;
color: #333;
}

#scrolldiv_slider{
15px;
margin-left:2px;
height:500px;
float:left;
}

#scrolldiv_scrollbar{
15px;
height:460px;
border:1px solid #BC8FBD;
position:relative;

}
#scrolldiv_theScroll{
margin:1px;
13px;
height:13px;
background-color:#BC8FBD;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
#scrolldiv_scrollUp,#scrolldiv_scrollDown{
15px;
height:16px;
border:1px solid #BC8FBD;
color: #BC8FBD;
text-align:center;
font-size:16px;
line-height:16px;
cursor:pointer;
}
#scrolldiv_scrollUp{
margin-bottom:2px;
}
#scrolldiv_scrollDown{
margin-top:2px;
}
#scrolldiv_scrollDown span,#scrolldiv_scrollUp span{
font-family: Symbol;
}

</style>
<script type="text/javascript">
var contentHeight = 0;
var visibleContentHeight = 0;
var scrollActive = false;
var scrollHandleObj = false;
var scrollHandleHeight = false;
var scrollbarTop = false;
var eventYPos = false;
var scrollbuttonActive = false;
var scrollbuttonDirection = false;
var scrollbuttonSpeed = 2;
var scrollTimer = 10;
var scrollMoveToActive = false;
var scrollMoveToYPosition = false;
function scrollDiv_startScroll(e)
{
if(document.all)e = event;
scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop;
eeventYPos = e.clientY;
scrollActive = true;
}

function scrollDiv_stopScroll()
{
scrollActive = false;
scrollbuttonActive = false;
scrollMoveToActive = false;
}
function scrollDiv_scroll(e)
{
if(!scrollActive)return;
if(document.all)e = event;
if(e.button!=1 && document.all)return;
var topPos = scrollbarTop + e.clientY - eventYPos;
if(topPos<0)topPos=0;
if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4);
document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'
}
function scrolldiv_scrollMoveToInit(e)
{
if(document.all)e = event;
scrollMoveToActive = true;
scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop;
if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else scrollbuttonDirection = scrollbuttonSpeed*2;
scrolldiv_scrollMoveTo();
}

function scrolldiv_scrollMoveTo()
{
if(!scrollMoveToActive || scrollActive)return;
var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
topPostopPos = topPos/1 + scrollbuttonDirection;
if(topPos<0){
topPos=0;
scrollMoveToActive=false;
}
if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
topPos = visibleContentHeight-(scrollHandleHeight+4);
scrollMoveToActive=false;
}
if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return;
if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return;
document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'
setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);
}

function cancelEvent()
{
return false;
}

function scrolldiv_scrollButton()
{
if(this.id=='scrolldiv_scrollDown')scrollbuttonDirection = scrollbuttonSpeed; else scrollbuttonDirection = scrollbuttonSpeed*-1;
scrollbuttonActive=true;
scrolldiv_scrollButtonScroll();
}
function scrolldiv_scrollButtonScroll()
{
if(!scrollbuttonActive)return;
var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');
topPostopPos = topPos/1 + scrollbuttonDirection;
if(topPos<0){
topPos=0;
scrollbuttonActive=false;
}
if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){
topPos = visibleContentHeight-(scrollHandleHeight+4);
scrollbuttonActive=false;
}
document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';
document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'
setTimeout('scrolldiv_scrollButtonScroll()',scrollTimer);
}
function scrolldiv_scrollButtonStop()
{
scrollbuttonActive = false;
}


function scrolldiv_initScroll()
{
visibleContentHeight = document.getElementById('scrolldiv_scrollbar').offsetHeight ;
contentHeight = document.getElementById('scrolldiv_content').offsetHeight - visibleContentHeight; scrollHandleObj = document.getElementById('scrolldiv_theScroll');
scrollHandleHeight = scrollHandleObj.offsetHeight;
scrollbarTop = document.getElementById('scrolldiv_scrollbar').offsetTop;
document.getElementById('scrolldiv_theScroll').onmousedown = scrollDiv_startScroll;
document.body.onmousemove = scrollDiv_scroll;
document.getElementById('scrolldiv_scrollbar').onselectstart = cancelEvent;
document.getElementById('scrolldiv_theScroll').onmouseup = scrollDiv_stopScroll;
if(document.all)document.body.onmouseup = scrollDiv_stopScroll; else
document.documentElement.onmouseup = scrollDiv_stopScroll;
document.getElementById('scrolldiv_scrollDown').onmousedown = scrolldiv_scrollButton;
document.getElementById('scrolldiv_scrollUp').onmousedown = scrolldiv_scrollButton;
document.getElementById('scrolldiv_scrollDown').onmouseup = scrolldiv_scrollButtonStop;
document.getElementById('scrolldiv_scrollUp').onmouseup = scrolldiv_scrollButtonStop;
document.getElementById('scrolldiv_scrollUp').onselectstart = cancelEvent;
document.getElementById('scrolldiv_scrollDown').onselectstart = cancelEvent;
document.getElementById('scrolldiv_scrollbar').onmousedown = scrolldiv_scrollMoveToInit;
}
function scrolldiv_setColor(rgbColor)
{
document.getElementById('scrolldiv_scrollbar').style.borderColor = rgbColor;
document.getElementById('scrolldiv_theScroll').style.backgroundColor = rgbColor;
document.getElementById('scrolldiv_scrollUp').style.borderColor = rgbColor;
document.getElementById('scrolldiv_scrollDown').style.borderColor = rgbColor;
document.getElementById('scrolldiv_scrollUp').style.color = rgbColor;
document.getElementById('scrolldiv_scrollDown').style.color = rgbColor;
document.getElementById('scrolldiv_parentContainer').style.borderColor = rgbColor;
}

function scrolldiv_setWidth(newWidth)
{
document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px';
document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px';
}

function scrolldiv_setHeight(newHeight)
{
document.getElementById('dhtmlgoodies_scrolldiv').style.height = newHeight + 'px';
document.getElementById('scrolldiv_parentContainer').style.height = newHeight + 'px';
document.getElementById('scrolldiv_slider').style.height = newHeight + 'px';
document.getElementById('scrolldiv_scrollbar').style.height = newHeight-40 + 'px';
}
function setSliderBgColor(rgbColor)
{
document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor;
document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor;
document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor;
}
function setContentBgColor(rgbColor)
{
document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor;
}
function setScrollButtonSpeed(newScrollButtonSpeed)
{
scrollbuttonSpeed = newScrollButtonSpeed;
}
function setScrollTimer(newInterval)
{
scrollTimer = newInterval;
}

</script>

</head>
<body>
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
<div id="scrolldiv_content">这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦。<br>
</div>
</div>
<div id="scrolldiv_slider">
<div id="scrolldiv_scrollUp"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_up.gif"></div>
<div id="scrolldiv_scrollbar">
<div id="scrolldiv_theScroll"><span></span></div>
</div>
<div id="scrolldiv_scrollDown"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_down.gif"></div>
</div>
</div>
<script type="text/javascript">
scrolldiv_setColor('#317082');
setSliderBgColor('#E2EBED');
setContentBgColor('#FFFFFF');
setScrollButtonSpeed(1);
setScrollTimer(5);
scrolldiv_setWidth(450);
scrolldiv_setHeight(400);
scrolldiv_initScroll();
</script>
</body>
</html>