我们先画张图来加深对重绘滚动条的理解 如下图所示看不清原色可以将其放大后便可清楚
接下来我们开始编写脚本,在开始编辑前请准备好以下文件
1.jquery 1.7.2以上版本,下载地址 下载JQUERY 地址。
2.mousewhell.js插件,该插件可以兼容各浏览器的鼠标滚轮事件 下载地址为:mousewhell.js
新建一个javascript文件
(function () {
/*初使滚动条*/
$.fn.ScrollInit = function () {
//提取目标对象的编号
var ID = $(this).attr('ID')
//初使化滚动条的高度
CommonFun(null, ID, 1, 0);
//DivNowDesk容器的鼠标滚轮事件
$('#' + ID).mousewheel(function (event, delta, deltaX, deltaY) {
/*当delta的值大于0时表示向上滚动 反之向下滚动*/
CommonFun(event, ID, 4, delta);
//阻止冒泡
event.stopPropagation();
event.preventDefault();
});
//DivNowDesk_right绑定鼠标左键按下事件
$('#'+ID+'_right').off('mousedown').on('mousedown', function (e) {
//当按下时计算出当前单击点到DivNowDesk的高度
var ScrollNum = e.clientY - parseInt(document.getElementById(ID + "_box").style.top);
//绑定文档的鼠标移动事件
$(document).on("mousemove", function (e) {
CommonFun(e, ID, 0, (e.clientY - ScrollNum));
}).on('mouseup', function () {
});
}).on('mouseup', function () { $(document).off("mousemove"); });
};
/*内容改变时重绘滚动条*/
$.fn.ScrollReDraw = function () {
var ID = $(this).attr('ID')
CommonFun(null, ID, 1, 0);
};
/*
event:事件
targetid:目标ID
controltype:操作类型
scrollTop:鼠标移动时计算出高度
*/
var CommonFun = function (event, targetid, controltype, scrollTop) {
if (document.selection && document.selection.empty)
document.selection.empty();
else if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
switch (controltype) {
case 0:
var objLeft = document.getElementById(targetid + "_left");
var objBox = document.getElementById(targetid + "_box");
var objCen = document.getElementById(targetid + "_cen");
var H = objCen.clientHeight - objBox.clientHeight;
if (scrollTop < 0)
scrollTop = 0;
if (scrollTop > H)
scrollTop = H;
var H2 = scrollTop / H * (objLeft.scrollHeight - objLeft.clientHeight);
objBox.style.top = scrollTop + "px";
objLeft.scrollTop = H2;
break;
case 1:
var objLeft = document.getElementById(targetid + "_left");
var objBox = document.getElementById(targetid + "_box");
var objCen = document.getElementById(targetid + "_cen");
document.getElementById(targetid).style.overflow = "hidden";
$("#" + targetid + "_left").bind("DOMMouseScroll", function (event) {
CommonFun(eval, '', 4, 0);
});
$("#" + targetid + "_left").bind("mousewheel", function (event) {
CommonFun(eval, '', 4, 0);
});
if (objLeft.scrollTop != null)
objLeft.scrollTop = 0;
var H = 0;
if (objLeft != null && objLeft != null)
H = objLeft.clientHeight / objLeft.scrollHeight;
if (objLeft.scrollTop != null)
objLeft.scrollTop = 0;
if (H >= 1) {
if (objBox != null)
objBox.style.display = "none";
}
else {
if (objBox != null) {
objBox.style.display = "";
var b_cen = 0;
if (objCen != null)
b_cen = objCen.clientHeight;
objBox.style.height = parseInt(H * b_cen) + "px";
objBox.style.top = "0px";
}
};
break;
case 4: //鼠标滑轮滚动操作
var H = document.getElementById(targetid + "_left").scrollTop;
if (scrollTop < 0) { H = H + 80 } else { H = H - 80 };
var H2 = document.getElementById(targetid + "_left").scrollHeight -
document.getElementById(targetid + "_left").clientHeight;
if (H < 0) H = 0; if (H > H2) H = H2;
var H3 = H / H2 * (document.getElementById(targetid + "_cen").clientHeight -
document.getElementById(targetid + "_box").clientHeight);
document.getElementById(targetid + "_left").scrollTop = H;
document.getElementById(targetid + "_box").style.top = H3 + "px";
break;
case 0:
var H = document.getElementById(b + "_cen").clientHeight - document.getElementById(b + "_box").clientHeight;
if (a < 0) a = 0; if (a > H) a = H;
var H2 = a / H * (document.getElementById(b + "_left").scrollHeight - document.getElementById(b + "_left").clientHeight);
document.getElementById(b + "_box").style.top = a + "px";
document.getElementById(b + "_left").scrollTop = H2;
break;
}
}
})(jQuery);
效果如下图