给一个Div层添加滚动条功能_层和布局特效

这是一个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" mrc="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{
		width:530px;
		height:500px;
	}
	#scrolldiv_parentContainer{
		width:500px;
		height:100%;
		overflow:hidden;
		border:1px solid #BC8FBD;
		float:left;
		position:relative;
	}
		#scrolldiv_mrc{
		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{
		width:15px;
		margin-left:2px;
		height:500px;
		float:left;
	}
	
		#scrolldiv_scrollbar{
		width:15px;
		height:460px;	/* Total height - 40 pixels */
		border:1px solid #BC8FBD;
		position:relative;
		
	}
		#scrolldiv_theScroll{
		margin:1px;
		width:13px;
		height:13px;
		background-color:#BC8FBD;
		position:absolute;	
		top:0px;
		left:0px;
		cursor:pointer;
	}
		#scrolldiv_scrollUp,#scrolldiv_scrollDown{
		width: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 mrcHeight = 0;
	var visibleContentHeight = 0;	
	var scrollActive = false;
	/*www.mb5u.com*/
	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_mrc').style.top = 0 - Math.floor((mrcHeight) * ((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_mrc').style.top = 0 - Math.floor((mrcHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px' 		
		setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);		
	}
	
	function cancelEvent()
	{
		return false;			
	}

</head>
<body>
<div id="dhtmlgoodies_scrolldiv">
<div id="scrolldiv_parentContainer">
	<div id="scrolldiv_mrc">这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦。<br>
	</div>
	</div>
	<div id="scrolldiv_slider">
	<div id="scrolldiv_scrollUp"><img src="/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="/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>

所属频道：层和布局特效/更新时间：2012-11-19

[收藏][报错][返回列表]

给一个Div层添加滚动条功能_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些