一个自定义的网页滚动条，支持图片显示

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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(//ku.shouce.ren/files/images/201601/56a3202b2d5c1.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>

AخA
 
<!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(//ku.shouce.ren/files/images/201601/56a3202b2d5c1.jpg) }
.scrollDiv{ width:18px;  position:absolute; top:0; background:#666; border-radius:10px;}
</style>
</head>
<body>
<div id="mainBox">

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

一个自定义的网页滚动条，支持图片显示

分类

网站常用

描述

再发一个自定义的网页滚动条，支持在滚动条内部显示图片，自动裁切所显示的图片，拖动滚动条可看到完整的图片，滚动条的样式也可以自己定义，再此对作者表示感谢。