/**
* created by administrator on 2017/9/6.
*/
//vertical and horizontal
/**
* 用div的拖拽以及滚动事件代替了滚动条，通过改变div的样式来改变滚动条的样式
*/
;(function($){
$.fn.extend({
"scrollbar":function(options){
var settings = {
barwidth:5,
position:"x,y",
wheeldis:15
};
options = $.extend(settings,options);
var horizontaldiv = '';
var verticaldiv = '';
var t = this;
/**
* 将每个div的padding值保存到自定义属性中
*/
t.each(function(){
$(this).attr("paddingr",$(this).css("padding-right")).attr("paddingb",$(this).css("padding-bottom"));
});
/**
*
*创建滚动条的函数
*/
function creatscrollbar(obj){
var this = $(obj).get(0);//转化为js对象，增加运行效率
var paddingr = parsefloat($(obj).attr("paddingr"));
var paddingb = parsefloat($(obj).attr("paddingb"));
$(obj).css({
"padding-right":paddingr+"px",
"padding-bottom":paddingb+"px",
"overflow":"hidden"
});
//获取内容的总高度和总宽度
if(!($(obj).children().hasclass("zl-scrollcontentdiv"))){
$(obj).wrapinner('');
};
if($(obj).css("position")=="static"){
$(obj).css({"position":"relative"});
};
var scrollcontentdiv = $(obj).find(".zl-scrollcontentdiv");
var scrollh = scrollcontentdiv[0].scrollheight;
var scrollw = scrollcontentdiv[0].scrollwidth;
var innerh = scrollcontentdiv.height();
var innerw = scrollcontentdiv.width();
var outerh = $(obj).innerheight();
var outerw = $(obj).innerwidth();
function addverticalbar(a){
this.style.paddingright = paddingr + settings.barwidth + 'px';
innerh = $(a).height();
var barheight = outerh*(innerh/scrollh);
$(a).find(".zl-scrollbarbox").remove().end().append(verticaldiv).find(".zl-verticalbar").height(barheight);
};
function addhorizontalbar(a){
this.style.paddingbottom = paddingb + settings.barwidth + 'px';
innerw = $(a).width();
var barwidth = outerw*(innerw/scrollw);
$(a).find(".zl-scrollbarbox").remove().end().append(horizontaldiv).find(".zl-horizontalbar").width(barwidth);
};
switch (settings.position){
case "x,y":
if(scrollh>innerh && scrollw>innerw){
this.style.paddingright = paddingr + settings.barwidth + 'px';
innerh = $(obj).height();
outerh = $(obj).innerheight();
var barheight = (outerh-settings.barwidth)*((innerh-settings.barwidth)/scrollh);
if(!($(obj).find(".zl-verticalbar").length)){
$(obj).append(verticaldiv);
};
$(obj).find(".zl-verticalbar").height(barheight).parent().height(outerh-settings.barwidth);
this.style.paddingbottom = paddingb + settings.barwidth + 'px';
innerw = $(obj).width();
var barwidth = (outerw-settings.barwidth)*((innerw-settings.barwidth)/scrollw);
if(!($(obj).find(".zl-horizontalbar").length)){
$(obj).append(horizontaldiv);
};
$(obj).find(".zl-horizontalbar").width(barwidth).parent().width(outerw)
.css({
"padding-right":settings.barwidth+"px",
"box-sizing":"border-box"
});
}else if(scrollh>innerh){
addverticalbar(obj);
}else if(scrollw>innerw){
addhorizontalbar(obj);
}else{
$(obj).find(".zl-scrollbarbox").remove();
}
break;
case "x":
if(scrollw>innerw){
addhorizontalbar(obj);
}else{
$(obj).find(".zl-scrollbarbox").remove();
}
break;
case "y":
if(scrollh>innerh){
addverticalbar(obj);
}else{
$(obj).find(".zl-scrollbarbox").remove();
}
break;
};
}
/**
* 循环给每一个div添加
*/
function recyclethis(){
t.each(function(){
creatscrollbar(this);
});
};
recyclethis();//执行循环
/**
*创建监听div内容变化的定时器
*/
function creattimer(obj,oldwidth,oldheight,oldinnerwidth,oldinnerheight,timer){
timer = setinterval(function(){
var newwidth = null;
var newheight = null;
var newinnerwidth = null;
var newinnerheight = null;
var topdiv = null;
var leftdiv = null;
var topbar = null;
var leftbar = null;
var scrollcontentdiv = $(obj).find(".zl-scrollcontentdiv");
if(scrollcontentdiv.length){
newwidth = scrollcontentdiv[0].scrollwidth;
newheight = scrollcontentdiv[0].scrollheight;
newinnerwidth = scrollcontentdiv.width();
newinnerheight = scrollcontentdiv.height();
}else{
newwidth = $(obj)[0].scrollwidth - parsefloat($(obj).css("padding-left"));
newheight = $(obj)[0].scrollheight - parsefloat($(obj).css("padding-top"));
newinnerwidth = $(obj).width();
newinnerheight = $(obj).height();
};
if(newwidth!=oldwidth || newheight!=oldheight || newinnerwidth!=oldinnerwidth || newinnerheight!=oldinnerheight){
//记录更新滚动条长短前的位置
if(scrollcontentdiv.length){
topdiv = parsefloat(scrollcontentdiv.css("top"));
leftdiv = parsefloat(scrollcontentdiv.css("left"));
};
if($(obj).find(".zl-verticalbar").length){
topbar = parsefloat($(obj).find(".zl-verticalbar").css("top"));
};
if($(obj).find(".zl-horizontalbar").length){
leftbar = parsefloat($(obj).find(".zl-horizontalbar").css("left"));
};
//更新滚动条长短或有无
creatscrollbar(obj);
if($(obj).find(".zl-scrollbarbox").length){
if(topdiv){
var maxtopbox = scrollcontentdiv[0].scrollheight - $(obj).height();
var maxleftbox = scrollcontentdiv[0].scrollwidth - $(obj).width();
if(-leftdiv>maxleftbox){
leftdiv = -maxleftbox;
}
if(-topdiv>maxtopbox){
topdiv = -maxtopbox;
}
scrollcontentdiv.css({
"left":leftdiv+'px',
"top":topdiv+'px'
});
};
//将原来的位置赋值给现在的滚动条
if(topbar && $(obj).find(".zl-verticalbar").length){
var verticalbar = $(obj).find(".zl-verticalbar");
var maxtop = verticalbar.parent().height() -verticalbar.height();
if(topbar>maxtop){
topbar = maxtop;
}
verticalbar.css("top",topbar+'px');
};
if(leftbar && $(obj).find(".zl-horizontalbar").length){
var horizontalbar = $(obj).find(".zl-verticalbar");
var maxleft = horizontalbar.parent().width() -horizontalbar.width();
if(leftbar>maxleft){
leftbar = maxleft;
}
$(obj).find(".zl-horizontalbar").css("left",leftbar+'px');
};
}
oldwidth = newwidth;
oldheight = newheight;
oldinnerheight = newinnerheight;
oldinnerwidth = newinnerwidth;
}
},100);
}
/**
* 通过循环给每一个div添加上监听内容变化的定时器
*/
function addtimer(){
$.each(t,function(k,v){
var obj = v;
var timer = "timer"+k;
var oldwidth = null;
var oldheight = null;
var oldinnerwidth = null;
var oldinnerheight = null;
if($(v).find(".zl-scrollcontentdiv").length){
oldwidth = $(v).find(".zl-scrollcontentdiv")[0].scrollwidth ;
oldheight = $(v).find(".zl-scrollcontentdiv")[0].scrollheight;
oldinnerwidth = $(v).find(".zl-scrollcontentdiv").width();
oldinnerheight = $(v).find(".zl-scrollcontentdiv").height();
}else{
oldwidth = $(obj)[0].scrollwidth - parsefloat($(obj).css("padding-left"));
oldheight = $(obj)[0].scrollheight - parsefloat($(obj).css("padding-top"));
oldinnerwidth = $(obj).width();
oldinnerheight = $(obj).height();
}
creattimer(obj,oldwidth,oldheight,oldinnerwidth,oldinnerheight,timer);
});
}
addtimer();
function cleartimer(){
$.each(t,function(index,item){
var timer = "timer"+index;
clearinterval(timer);
});
};
/**
* 滚动条拖拽效果
*/
this.on("mousedown",".zl-scrollbar",function(ev){
cleartimer();//清除定时器
var direction = null;
if($(this).hasclass("zl-verticalbar")){
direction = "0";
}else if($(this).hasclass("zl-horizontalbar")){
direction = "1";
}
var this = $(this).get(0);
var height = $(this).parent().height() - $(this).height();
var width = $(this).parent().width() - $(this).width();
var contentdiv = $(this).parent().parent().find(".zl-scrollcontentdiv").get(0);
var scrollh = contentdiv.scrollheight;
var innerh = $(this).parent().parent().height();
var scrollw = contentdiv.scrollwidth;
var innerw = $(this).parent().parent().width();
var ev = ev || event;
var disy = ev.clienty - this.offsettop;
var disx = ev.clientx - this.offsetleft;
var topcount = null;
var leftcount = null;
switch (direction){
case "0":
document.onmousemove = function(ev){
var ev = ev || event;
if(ev.clienty - disy <= 0){
topcount = 0;
}else
if((ev.clienty - disy) >= height){
topcount = height;
}else{
topcount = ev.clienty - disy;
}
this.style.top = topcount + "px";
contentdiv.style.top = -(topcount*(scrollh - innerh)/height) + 'px';
};
break;
case "1":
document.onmousemove = function(ev){
var ev = ev || event;
if(ev.clientx - disx <= 0){
leftcount = 0;
}else
if((ev.clientx - disx) >= width){
leftcount = width;
}else{
leftcount = ev.clientx - disx;
}
this.style.left = leftcount + "px";
contentdiv.style.left = -(leftcount*(scrollw - innerw)/width) + 'px';
};
break;
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
addtimer();//添加定时器
};
return false;
});
/**
*鼠标滚轮效果
*/
function fn(ev,a){
if(a.find(".zl-verticalbar").length){
var b = true;
var height = a.find(".zl-scrollbarbox").height() - a.find(".zl-scrollbar").height();
var contentdiv = a.find(".zl-scrollcontentdiv").get(0);
var scrollh = contentdiv.scrollheight;
var innerh = a.height();
if(ev.wheeldelta){
b = ev.wheeldelta>0?true:false;
}else{
b = ev.detail<0?true:false;
}
var topdis = parsefloat(a.find(".zl-scrollbar").css("top"));
if(b){
topdis -= settings.wheeldis;
if(topdis <0){
topdis = 0;
}
}else{
topdis += settings.wheeldis;
if(topdis > height){
topdis = height;
}
}
a.find(".zl-scrollbar").get(0).style.top = topdis + "px";
a.find(".zl-scrollcontentdiv").get(0).style.top = -(topdis*(scrollh - innerh)/height) + 'px';
}
};
t.each(function(){
var odiv = $(this).get(0);
if(odiv.addeventlistener){
odiv.addeventlistener("dommousescroll",function(ev){
var ev = ev || event;
var $this = $(this);
fn(ev,$this);
ev.preventdefault();
},false);
}
odiv.onmousewheel = function(ev){
var ev = ev || event;
var $this = $(this);
fn(ev,$this);
return false;
};
});
return this;
}
});
})(jquery);