图片与JavaScript配合做出个性滚动条

小提示

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>图片与JavaScript配合做出个性滚动条</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
	position:relative;
	width:500px;
	height:300px;
	margin:100px 0 100px 80px;
	border:1px solid #369;
	overflow:hidden;
}
#content {
	width:520px;
	height:100%;
	overflow:auto;
	-moz-user-select:none;
}
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
	background-image:url(//ku.shouce.ren/files/images/201601/56a321bd14812.gif);
}
#scrollBar {
	position:absolute;
	top:0;
	right:0;
	z-index:9;
	width:14px;
	height:100%;
	background-repeat:repeat-y;
	background-position:-42px 0;
	float:left;
}
#scrollBarTop,#scrollBarHandle,#scrollBarBottom {
	position:absolute;
	left:0;
	cursor:default;
}
#scrollBarTop,#scrollBarBottom {
	width:100%;
	height:14px;
	color:#fff;
	text-align:center;
}
#scrollBarTop { top:0; }
#scrollBarBottom { bottom:0; }
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; }
.scroll_bar_top { background-position:0 0; }
.scroll_bar_top_a { background-position:-14px 0; }
.scroll_bar_bottom { background-position:-56px 0; }
.scroll_bar_bottom_a { background-position:-70px 0; }
</style>
</head>
<body>
<div id="out">
 <div id="content">
 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 
 </div>
 <div id="scrollBar">
 	<div id="scrollBarTop" class="scroll_bar_top"></div>
 <div id="scrollBarHandle"></div>
 <div id="scrollBarBottom" class="scroll_bar_bottom"></div>
 </div>
</div>
<script>
var ximen = {
	$:function(o){ return document.getElementById(o); },
	getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
	getOffset:function(o) {
		var t = o.offsetTop,h = o.offsetHeight;
		while(o = o.offsetParent) { t += o.offsetTop; }
		return { top:t, height:h };
	},
	bind:function(o,eType,fn) {
		if(o.addEventListener) { o.addEventListener(eType,fn,false); }
		else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
		else { o["on" + eType] = fn; }
	},
	unbind:function(o,eType,fn) {
		if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
		else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
		else { o["on" + eType] = fn; }
	},
	stopPropagate:function(e) {
		if(e && e.stopPropagation) { e.stopPropagation(); } 
		else { window.event.cancelBubble = true; }
		return false;
	},
	stopDefault:function(e) {
		e = e || window.event;
		e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
	}
};
(function(){
	var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
		out = ximen.$("out"),
		content = ximen.$("content"),
		scrollBar = ximen.$("scrollBar"),
		scrollBarTop = ximen.$("scrollBarTop"),
		scrollBarHandle = ximen.$("scrollBarHandle"),
		scrollBarBottom = ximen.$("scrollBarBottom"),
		scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
		scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
		contentScrollHeight = content.scrollHeight,//将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
		scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
		setScrollBarHandle = function() {//当内容超多时设置拖拽条子的最小高度
			scrollBarHandle.style.top = scrollBarUpHeight + "px";
			if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }
			else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }
		},
		clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
		forMousemove = function(e) {
			var e = e || window.event;
			content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
		},
		forMouseDown = function(event){
			var et = event.target || event.srcElement;
			relY = event.clientY - et.offsetTop;
			ximen.bind(document,"mousemove",forMousemove);
		},
		scrollDir = function(e) {
			var e = e || window.event,eDir;					//设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
			if(e.wheelDelta) { eDir = e.wheelDelta/120; }
			else if(e.detail) { eDir = -e.detail/3; }
			if(eDir > 0) { content.scrollTop -= 80; }	//步长设80像素a比较接近window滚动条的滚动速度
			else { content.scrollTop += 80; }
			ximen.stopDefault(e);
		},
		scrollBarClick = function(e) {
			var e = e || window.event,
				mStep = scrollBar.offsetHeight,
				documentScrollTop = document.documentElement.scrollTop,
				hOffset = ximen.getOffset(scrollBarHandle);
			if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
			else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
		};
	setScrollBarHandle();
	ximen.bind(content,"scroll",function(){
		scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
	});
	ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
	ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
	ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
	ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
	ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
	ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
	ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
	ximen.bind(document,"mouseup",function(){
		ximen.unbind(document,"mousemove",forMousemove);
		ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
	});
	ximen.bind(out,"selectstart",function(){ return false; });
	ximen.bind(out,"select",function(){ document.selection.empty(); });
	ximen.bind(out,"mousewheel",scrollDir);
	ximen.bind(out,"DOMMouseScroll",scrollDir);
	ximen.bind(scrollBar,"mousedown",scrollBarClick);
	ximen.bind(scrollBar,"mouseup",clearAllInterval);
	ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
	ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
	ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
	ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
	ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
	ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
	ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
	ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
})();
</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>图片与JavaScript配合做出个性滚动条</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
    position:relative;
    width:500px;
    height:300px;
    margin:100px 0 100px 80px;

CSS代码

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

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

图片与JavaScript配合做出个性滚动条

分类

网站常用

描述

如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢.