/**
* 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 = '<div class="zl-scrollBarBox" style="width:100%;left:0;height:'+settings.barWidth+'px;bottom:0;">'+
'<div class="zl-scrollBar zl-horizontalBar" style="height:'+settings.barWidth+'px;border-radius:'+settings.barWidth/2+'px;"></div>'+
'</div>';
var verticalDiv = '<div class="zl-scrollBarBox" style="height:100%;top:0;width:'+settings.barWidth+'px;right:0;">'+
'<div class="zl-scrollBar zl-verticalBar" style="width:'+settings.barWidth+'px;border-radius:'+settings.barWidth/2+'px;"></div>'+
'</div>';
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('<div class="zl-scrollContentDiv"></div>');
};
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 = '0'; //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 = '0'; //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'
// });
scrollContentDiv.css({
"left":0,
"top":0
});
};
//将原来的位置赋值给现在的滚动条
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';
$(".zl-scrollBar").addClass("zl-scrollBarBackground");
setTimeout(function(){$(".zl-scrollBar").removeClass("zl-scrollBarBackground");},1500);
}
};
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);