页面滚动条代码，自定义滚动

2024-09-05 12:18:37

字体：大中小

来源：转载

供稿：网友

网页上用的滚动条，这是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的。

<!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=utf-8" /><title>滚动条</title><style type="text/css">*{ margin:0; padding:0;}p{ height:1000px;}#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}#content{  height:2500px; position:absolute; left:0; top:0; background:url(http://h.hiphotos.baidu.com/album/s%3D1400%3Bq%3D90/sign=84e8a533d562853596e0d625a0df4db7/728da9773912b31bafe912e88618367adbb4e16e.jpg) }.scrollDiv{ width:18px;  position:absolute; top:0; background:#666; border-radius:10px;}</style></head><body><div id="mainBox">	<div id="content"></div></div><p></p><script type="text/javascript">var doc=document;var _wheelData=-1;var mainBox=doc.getElementById('mainBox');function bind(obj,type,handler){	var node=typeof obj=="string"?$(obj):obj;	if(node.addEventListener){		node.addEventListener(type,handler,false);	}else if(node.attachEvent){		node.attachEvent('on'+type,handler);	}else{		node['on'+type]=handler;	}}function mouseWheel(obj,handler){	var node=typeof obj=="string"?$(obj):obj;		bind(node,'mousewheel',function(event){			var data=-getWheelData(event);			handler(data);			if(document.all){				window.event.returnValue=false;			}else{				event.preventDefault();			}					});		//火狐		bind(node,'DOMMouseScroll',function(event){			var data=getWheelData(event);			handler(data);			event.preventDefault();		});		function getWheelData(event){			var e=event||window.event;			return e.wheelDelta?e.wheelDelta:e.detail*40;		}}function addScroll(){	this.init.apply(this,arguments);}addScroll.prototype={	init:function(mainBox,contentBox,className){		var mainBox=doc.getElementById(mainBox);		var contentBox=doc.getElementById(contentBox);		var scrollDiv=this._createScroll(mainBox,className);		this._resizeScorll(scrollDiv,mainBox,contentBox);		this._tragScroll(scrollDiv,mainBox,contentBox);		this._wheelChange(scrollDiv,mainBox,contentBox);		this._clickScroll(scrollDiv,mainBox,contentBox);	},	//创建滚动条	_createScroll:function(mainBox,className){		var _scrollBox=doc.createElement('div')		var _scroll=doc.createElement('div');		var span=doc.createElement('span');		_scrollBox.appendChild(_scroll);		_scroll.appendChild(span);		_scroll.className=className;		mainBox.appendChild(_scrollBox);		return _scroll;	},	//调整滚动条	_resizeScorll:function(element,mainBox,contentBox){		var p=element.parentNode;		var conHeight=contentBox.offsetHeight;		var _width=mainBox.clientWidth;		var _height=mainBox.clientHeight;		var _scrollWidth=element.offsetWidth;		var _left=_width-_scrollWidth;		p.style.width=_scrollWidth+"px";		p.style.height=_height+"px";		p.style.left=_left+"px";		p.style.position="absolute";		p.style.background="#ccc";		contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";		var _scrollHeight=parseInt(_height*(_height/conHeight));		if(_scrollHeight>=mainBox.clientHeight){			element.parentNode.style.display="none";		}		element.style.height=_scrollHeight+"px";	},	//拖动滚动条	_tragScroll:function(element,mainBox,contentBox){		var mainHeight=mainBox.clientHeight;		element.onmousedown=function(event){			var _this=this;			var _scrollTop=element.offsetTop;			var e=event||window.event;			var top=e.clientY;			//this.onmousemove=scrollGo;			document.onmousemove=scrollGo;			document.onmouseup=function(event){				this.onmousemove=null;			}			function scrollGo(event){				var e=event||window.event;				var _top=e.clientY;				var _t=_top-top+_scrollTop;				if(_t>(mainHeight-element.offsetHeight)){					_t=mainHeight-element.offsetHeight;				}				if(_t<=0){					_t=0;				}				element.style.top=_t+"px";				contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";				_wheelData=_t;			}		}		element.onmouseover=function(){			this.style.background="#444";			}		element.onmouseout=function(){			this.style.background="#666";			}	},	//鼠标滚轮滚动，滚动条滚动	_wheelChange:function(element,mainBox,contentBox){		var node=typeof mainBox=="string"?$(mainBox):mainBox;		var flag=0,rate=0,wheelFlag=0;		if(node){			mouseWheel(node,function(data){				wheelFlag+=data;				if(_wheelData>=0){					flag=_wheelData;					element.style.top=flag+"px";					wheelFlag=_wheelData*12;					_wheelData=-1;				}else{					flag=wheelFlag/12;				}				if(flag<=0){					flag=0;					wheelFlag=0;				}				if(flag>=(mainBox.offsetHeight-element.offsetHeight)){					flag=(mainBox.clientHeight-element.offsetHeight);					wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;									}				element.style.top=flag+"px";				contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";			});		}	},	_clickScroll:function(element,mainBox,contentBox){		var p=element.parentNode;		p.onclick=function(event){			var e=event||window.event;			var t=e.target||e.srcElement;			var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;			var top=mainBox.offsetTop;			var _top=e.clientY+sTop-top-element.offsetHeight/2;			if(_top<=0){				_top=0;			}			if(_top>=(mainBox.clientHeight-element.offsetHeight)){				_top=mainBox.clientHeight-element.offsetHeight;			}			if(t!=element){				element.style.top=_top+"px";				contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";				_wheelData=_top;			}		}	}}new addScroll('mainBox','content','scrollDiv');</script></body></html>

上一篇：JS模拟的腾讯微博app撕纸效果

下一篇：IE调用JS的window.print()方法打印网页内容