<!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;
eventYPos = 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','');
topPos = 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','');
topPos = 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>