模拟滚动条
模拟滚动条
【html结构】: 外框里面的class都是固定的,注意每个模块的css有些是有定位属性的 <div class="" id="ID名"> ---有position:relative; 和 overflow:hiddle; 属性 <div class="scroll-content-wrap">内容区域</div> ---有position:absolute; 属性 <div class="scroll-ground-wrap"> ---有position:absolute; 和 overflow:hiddle; 属性 <span class="scroll-ground"></span> ---有position:absolute; 属性 </div> </div> 【js调用方法】: var grounds=new scrollGround(); grounds.scrollBar({ id:'ID名', ---外框ID名 oN:false ---是否开启滚动小块的拖拉操作(默认为false,不开启) }); 【js实现代码】: function scrollGround(){ this.opt={ id:'', oN:false }; this.oPraentWrap=null; this.contentWrap=null; this.groundWrap=null; this.ground=null; this.praentH=0; //父级高度 this.conterH=0; //内容高度 this.groundwH=0; //滚动块外框高度 this.num=0; //滚动块的高度值 this.maxConterNum=0; //内容的top最大值 this.maxGroundNum=0; //小滚动块的top最大值 }; scrollGround.prototype.scrollBar=function(opt){ var This=this; $.extend(this.opt,opt); this.init(); //初始化 }; scrollGround.prototype.init=function(){ var This=this; this.oPraentWrap=$('#'+this.opt.id); this.contentWrap=this.oPraentWrap.find('.scroll-content-wrap'); this.groundWrap=this.oPraentWrap.find('.scroll-ground-wrap'); this.ground=this.oPraentWrap.find('.scroll-ground'); this.praentH=this.oPraentWrap.outerHeight(); this.conterH=this.contentWrap.outerHeight(); this.groundwH=this.groundWrap.outerHeight(); this.gdthHiddle(); //判断内容区域的高度是否超出外框高度,如果超出就隐藏滚动区域 this.numGdtH(); //计算滚动块的高度值 = ( 父级外框高度/内容外框高度 )*滚动外框的高度 this.scrollWeel(); //鼠标移入内容区域滚动滚动条 if(this.opt.oN){ //开关打开时执行用户鼠标操作滚动小块 this.eventWeel(); }; }; scrollGround.prototype.gdthHiddle=function(){ if(this.conterH<=this.praentH){ this.groundWrap.hide(); }; }; scrollGround.prototype.numGdtH=function(){ this.num=( this.praentH/this.conterH ) * this.groundwH; this.ground.height(this.num); }; scrollGround.prototype.scrollWeel=function(){ var This=this; if(this.conterH<=this.praentH) return; this.maxConterNum=this.conterH-this.praentH; this.maxGroundNum=this.groundwH-this.num; mousewheel(this.oPraentWrap.get(0),function(){ //滚动小块的top值变化 var numBot=This.ground.position().top-5; if(numBot<=0){ numBot=0 }; This.ground.css('top',numBot); //内容区域的top值变化 内容区域能走的top值=(滚动小块走的top/滚动小块能走的最大top)*内容能走的最大top var contentTop=(numBot/This.maxGroundNum)*This.maxConterNum; This.contentWrap.css('top',-contentTop); },function(){ //滚动小块的top值变化 var numBot=This.ground.position().top+5; if(numBot>=This.maxGroundNum){ numBot=This.maxGroundNum }; This.ground.css('top',numBot); //内容区域的top值变化 var contentTop=(numBot/This.maxGroundNum)*This.maxConterNum; This.contentWrap.css('top',-contentTop); }); //封装鼠标滚轮事件 向上滚和向下滚 function mousewheel(obj,upFn,downFn){ obj.onmousewheel = mousewheelFn; if( obj.addEventListener ){ obj.addEventListener("DOMMouseScroll",mousewheelFn,false); }; function mousewheelFn(ev){ ev = ev || event; var direction = true; //IE和谷歌下滚轮事件 判断上滚还是下滚 if( ev.wheelDelta ){ direction = ev.wheelDelta > 0 ? true : false; }; //火狐下滚轮事件 判断上滚还是下滚 if( ev.detail ){ direction = ev.detail < 0 ? true : false; }; //向上或向下 分别执行不同的函数 if( direction ){ typeof upFn === "function" && upFn(ev); }else{ typeof downFn === "function" && downFn(ev) }; //火狐下 清除浏览器默认样式 (使用addEventListener时return false是没用的) if( ev.preventDefault ){ ev.preventDefault() }; //IE和谷歌下 清除浏览器默认样式 ev.returnValue = false; }; //用法:upFn函数代表滚轮向上滚动 downFn函数代表滚轮向下滚动 }; }; scrollGround.prototype.eventWeel=function(){ var This=this; this.ground.mousedown(function(event) { var GT=event.pageY-This.ground.position().top; $(document).mousemove(function(event) { //控制滚动小块的top值 var GTX=event.pageY-GT; if(GTX<=0){ GTX=0 }; if(GTX>=This.maxGroundNum){ GTX=This.maxGroundNum }; This.ground.css('top',GTX); //控制内容区域的top值 CTX = (内容区域能走的最大距离*小块走的top值)/小块能走的最大距离 var CTX=(This.maxConterNum*GTX)/This.maxGroundNum; This.contentWrap.css('top',-CTX); }); $(document).mouseup(function(event) { $(document).off(); }); return false; }); };