/**
* Created by Administrator on 2017/9/6.
*/
//Vertical and horizontal
/**
* 鐢╠iv鐨勬嫋鎷戒互鍙婃粴鍔ㄤ簨浠朵唬鏇夸簡婊氬姩鏉★紝閫氳繃鏀瑰彉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;
/**
* 灏嗘瘡涓猟iv鐨刾adding鍊间繚瀛樺埌鑷畾涔夊睘鎬т腑
*/
T.each(function(){
$(this).attr("paddingR",$(this).css("padding-right")).attr("paddingB",$(this).css("padding-bottom"));
});
/**
*
*鍒涘缓婊氬姩鏉＄殑鍑芥暟
*/
function creatScrollBar(obj){
var This = $(obj).get(0);//杞寲涓篔S瀵硅薄锛屽鍔犺繍琛屾晥鐜
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;
};
}
/**
* 寰幆缁欐瘡涓€涓狣iv娣诲姞
*/
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);
}
/**
* 閫氳繃寰幆缁欐瘡涓€涓猟iv娣诲姞涓婄洃鍚唴瀹瑰彉鍖栫殑瀹氭椂鍣
*/
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);