Posted in Javascript onOctober 26, 2015
本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下：
这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。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(//img.jbzj.com/file_images/article/201510/20151026113716032.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>
希望本文所述对大家JavaScript程序设计有所帮助。
JS实现的页面自定义滚动条效果
- Author -
企鹅声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@