jquery插件 - 自定义滚动条插件

(function($)
    {
        //跟随列表的标题头
        $.fn.jscrollview = function(o){
            //默认配置
            var def =
            {
                btnhtml: '<div class="day_roll_hover scrollbar-handle"></div>',       //滚动条按钮
                scrollhtml: '<div class="roll_right Scrollbar-Track"></div>',    //滚动条
                width: 0, 
                height: 0,
                speed: 2,//设置滚动滚轮时移动的速度
                $container: $('<div></div>')//容器，jquery对象
            };
            $.extend(def, o);
            
            return this.each(function(){
                var $me = $(this);
                //容器
                var $con = def.$container;
                //滚动条按钮
                var $btn;
                //滚动条
                var $scroll;
                
                if(def.width==0)
                    def.width = $con.width();
                if(def.height==0)
                    def.height = $con.height();
                var cw = def.width; 
                var ch = def.height;
                var height = 0;
                var scale = 0;//比列
                
                $con.css({width: def.width, height: def.height, overflow: "hidden", position: "relative"});
                $me.css({position: "absolute"});
                
                //滚动条同步内容
                function onMove(){
                    var offset = $btn.position();
                    $me.css("top", -offset.top*scale);
                }
                //滚动条事件
                function onDocmentWheel(e){
                    var wheelDelta = e.wheelDelta ? e.wheelDelta : -e.detail;
                    wheelDelta = wheelDelta*def.speed;
                    move(wheelDelta);
                    return false;
                }
                
                //移动内容区，同步滚动条按钮坐标
                function move(px){
                    var offset = $me.position();
                    var top = offset.top + px*scale;
                    if(top > 0){
                        top = 0;
                    }
                    else if(top < (ch - height)){
                        top = ch - height;
                    }
                    $me.css("top", top);
                    $btn.css("top", -top/scale);
                }
                
                //点击滚动条
                function clickScroll(e){
                    if(e.target == $btn.get(0))
                        return;
                    var top = e.pageY;
                    var p1 = $scroll.offset();
                    if(top - p1.top - $btn.outerHeight()/2 < 0){
                        $btn.css("top", "0px");
                    }
                    else if(top - p1.top + $btn.outerHeight()/2 > $scroll.outerHeight()){
                        $btn.css("top", $scroll.outerHeight() - $btn.outerHeight() + "px");
                    }
                    else{
                        $btn.css("top", top - p1.top - $btn.outerHeight()/2 + "px");
                    }
                    onMove();
                }
                
                function init(){
                    height = $me.outerHeight();
                    if($con.find(".jquery_scroll_com")){
                        $con.find(".jquery_scroll_com").remove();
                    }
                    //是否需要出现滚动条
                    if(ch >= height){
                        $(document).unbind("mousewheel", onDocmentWheel);
                        $(document).unbind("DOMMouseScroll", onDocmentWheel);
                    }
                    else{
                        //滚动条按钮
                        $btn = $(def.btnhtml);
                        //滚动条
                        $scroll = $(def.scrollhtml);
                        $scroll.addClass("jquery_scroll_com");
                        $scroll.append($btn);
                        $con.append($scroll);
                        
                        $scroll.css({top:0, position: "absolute", height: ch, left: cw-$scroll.outerWidth()-$scroll.outerWidth()/2});
                        $btn.css({top:"0px",position: "absolute"});
                        $me.css({top:"0px"});
                        scale = (height - ch)/(ch - $btn.outerHeight());//比列
                        
                        //设置按钮拖动
                        var position = $scroll.position();
                        $btn.dragdrop({
                            dragDirection: 'vertical',
                            moveCallBack: onMove,
                            fixarea: [0, 0, position.top, position.top + $scroll.height() - $btn.height()]
                        });
                        
                        //滚动条相关
                        $con.bind("mouseover", function(){
                            $(document).bind("mousewheel", onDocmentWheel);
                            $(document).bind("DOMMouseScroll", onDocmentWheel);
                        });
                        $con.bind("mouseout", function(){
                            $(document).unbind("mousewheel", onDocmentWheel);
                            $(document).unbind("DOMMouseScroll", onDocmentWheel);
                        });
                        
                        $scroll.bind("click", clickScroll);
                    }
                }
                
                init();
                //绑定重置滚动条
                $me.bind("onScrollReset", init);
                return $me;
            });
        }
        
        //重置滚动条
        $.fn.jscrollview_Reset = function(){
            $(this).trigger("onScrollReset");
        }
        
    })(jQuery);