Jquery 重新绘制DOM元素的滚动条

我们先画张图来加深对重绘滚动条的理解 如下图所示看不清原色可以将其放大后便可清楚

接下来我们开始编写脚本,在开始编辑前请准备好以下文件

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);

效果如下图