$(function(){ }); //判断为空的函数 function isnullorundefinedorempty(_value) { if (_value == undefined || _value == null || _value == '') { return true; } else { return false; } } function scrool() { this.scrollboxheight = ''; this.scrollcontheight = ''; this.scrolltiaohheight = ''; this.contmaxjuli = ''; this.scrollhuakuaiheight = ''; this.huakuaimaxjuli = ''; } $.fn.extend({ customscrollbar: function(inittop,huakuaicolor){ $(this).each(function(){ var self = $(this); // console.log(self.html()); //拼接 var strcont = ""; strcont = '
' +'
'; self.find('.scroll_box').append(strcont); //初始化 self.find('.scroll_box').find('.scroll_tiao').css({ 'height':'100%', 'position':'absolute', 'background-color':'#e5e5e5', 'width':'1px', 'right':'1px', 'top':'0' }); self.find('.scroll_box').find('.scroll_cont').css({ 'position':'absolute', 'top':'0', 'left':'0', 'margin-right':'40px' }); self.find('.scroll_box').find('.scroll_huakuai').css({ "width":"3px", "height":'30px', "z-index": "5", "margin-left":"0", "position": "absolute", "right":"-1px" }); var scrool = new scrool(); // 最外层容器box的高度 scrool.scrollboxheight = self.height(); // 内容层的高度 scrool.scrollcontheight = self.find('.scroll_cont').height(); // 滚动条容器的高度 scrool.scrolltiaohheight = scrool.scrollboxheight; // 内容能滚动的最大高度 scrool.contmaxjuli = scrool.scrollcontheight - scrool.scrollboxheight; // 滑块的高度 scrool.scrollhuakuaiheight = self.find('.scroll_huakuai').height(); // 滑块能滚动的最大范围 scrool.huakuaimaxjuli = scrool.scrolltiaohheight - scrool.scrollhuakuaiheight; //判断第一个参数,如果为空,给inittop一个初始值。如果不为空,判断是像素的模式还是百分比模式,无论哪个模式,inittop的值都不能大于滑块能滚动的最大高度 if (isnullorundefinedorempty(inittop)) { inittop = 0; }else if(inittop.indexof('px') > 0){ var inittop1 = parseint(inittop); if(inittop1 > scrool.huakuaimaxjuli){ throw '您传入的第一个参数不正确,不能大于滑块能滚动的最大高度'; return false; } }else if(inittop.indexof('%') > 0){ var inittop2 = parseint(inittop); var percent_top = (scrool.huakuaimaxjuli / scrool.scrolltiaohheight) * 100; if(inittop2 > percent_top){ throw '您传入的第一个参数不正确,不能大于滑块能滚动的最大高度%'; } } //判断第二个参数 if(isnullorundefinedorempty(huakuaicolor)){ huakuaicolor = '#1ea0d2'; } self.find('.scroll_box').find('.scroll_huakuai').css({ 'top':inittop, 'background-color':huakuaicolor }); //初始化 inittop var huakuaitop = parseint(self.find('.scroll_box').find('.scroll_huakuai').css('top')); var scroll_conttop = -(scrool.contmaxjuli * (huakuaitop / scrool.huakuaimaxjuli)); self.find('.scroll_box').find('.scroll_huakuai').css({ "top":huakuaitop + 'px' }); self.find('.scroll_box').find('.scroll_cont').css({ "top":scroll_conttop + 'px' }); //当内容的高度大于容器的高度时,滚动条才显示 if(scrool.scrollcontheight <= scrool.scrollboxheight){ self.find('.scroll_box').find('.scroll_tiao').hide(); }else{ self.find('.scroll_box').find('.scroll_tiao').show(); //滚轮事件 $(this)=$('.scroll_box') function wheel(){ self.find('.scroll_box').bind('mousewheel dommousescroll', function (e) { e.preventdefault(); var _delta = parseint(e.originalevent.wheeldelta || -e.originalevent.detail); var huakuaitop = parseint(self.find('.scroll_box').find('.scroll_huakuai').css('top')); var scroll_conttop = 0; if (_delta > 0) { //向上 huakuaitop -= 10; scroll_conttop = -(scrool.contmaxjuli * (huakuaitop / scrool.huakuaimaxjuli)); if(huakuaitop < 0){ self.find('.scroll_box').find('.scroll_huakuai').css({ "top":0 + 'px' }); self.find('.scroll_box').find('.scroll_cont').css({ "top":0 + 'px' }); return false; } self.find('.scroll_box').find('.scroll_huakuai').css({ "top":huakuaitop + 'px' }); self.find('.scroll_box').find('.scroll_cont').css({ "top":scroll_conttop + 'px' }); return false; } else { //向下 huakuaitop += 10; scroll_conttop = -(scrool.contmaxjuli * (huakuaitop / scrool.huakuaimaxjuli)); if(huakuaitop > scrool.huakuaimaxjuli){ self.find('.scroll_box').find('.scroll_huakuai').css({ "top":scrool.huakuaimaxjuli + 'px' }); self.find('.scroll_box').find('.scroll_cont').css({ "top":-scrool.contmaxjuli + 'px' }); return false; } self.find('.scroll_box').find('.scroll_huakuai').css({ "top":huakuaitop + 'px' }); self.find('.scroll_box').find('.scroll_cont').css({ "top":scroll_conttop + 'px' }); return false; } return false; }); } //鼠标拖动滑块事件 $(this)=$('.scroll_box') function drag(){ self.find('.scroll_box').find('.scroll_huakuai').bind('mousedown',function(event){ if(event.button==0){ //判断是否点击鼠标左键 ,event.button=0|1|2 分别是鼠标左中右键 //鼠标按下那一刻,先算出鼠标距离小块左边和上边的距离gapx,gapy,后面根据这个距离以及鼠标的坐标,算出小块的位置 obj_offsettop = self.find('.scroll_huakuai').offset().top; gapy = event.clienty-self.find('.scroll_huakuai').offset().top; self.find('.scroll_box').bind('mousemove',move); $(document).bind('mouseup',stop) function move(e1){ //整个大的容器距离网页最顶端的高度为box_margin_top var box_margin_top = parseint(self.find('.scroll_box').offset().top); //拖拽,滑块随着鼠标走 var huakuaitop = e1.clienty - gapy - box_margin_top; //内容部分top值计算 var scroll_conttop =-( scrool.contmaxjuli * (huakuaitop / scrool.huakuaimaxjuli)); if(huakuaitop < 0){ huakuaitop = 0; scroll_conttop = 0; }else if(huakuaitop > scrool.huakuaimaxjuli){ huakuaitop = scrool.huakuaimaxjuli; scroll_conttop = -scrool.contmaxjuli; } self.find('.scroll_huakuai').css({ "top":huakuaitop + 'px' }); self.find('.scroll_cont').css({ "top":scroll_conttop + 'px' }); } function stop(){ self.find('.scroll_box').unbind('mousemove',move); self.find('.scroll_box').find('.scroll_huakuai').unbind("mouseup",stop); } } event.preventdefault();//取消默认事件 (鼠标碰到文字默认选中) }); } wheel(); drag(); } }); } });