配合鼠标滚轮事件的可自定义样式的区域滚动条插件(基于jquery)
预览效果:
CSS:
.scrollbar{ margin:20px;width:300px;height:300px; background:#303030; color:#CCC;} .scrollbar-track{ float:right;height:300px;width:14px; background:#3C3C3C;} .scrollbar-handle{ background:#616161; height:80px; border-radius:7px; cursor:pointer;} .handle-hover{ background:#777;} .scrollbar-area{float:leftwidth:290px;height:300px; overflow:hidden}
DOM:
<div class="J_PZScrollbar scrollbar" data-dir="y"> <div class="scrollbar-track"> <div class="scrollbar-handle"></div> </div> <div class="scrollbar-area"> <div class="scroll-content"> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> <p>wefwefwef</p> </div> </div> </div>
JS:
(function(){ /** @基于jQuery滚动条插件 @修改css来实现需要的效果。 @页面可出现多个类似插件,只要复制dom结构到对应位置即可。 @杨永 @QQ:377746756 @call:18911082352 @版本:1.0 */ function PZScrollbar(object){ var _this_=this; //保存传递将来的对象 this.scrollObject=object; //获取方向属性 this.dir=this.scrollObject.attr("data-dir"); //保存滚动对象 this.scrollContent=$(".scroll-content",object); //获取滚动内容于于可视区域的比例 this.beishu={ mx:$(".scroll-content",object).width()/$(".scrollbar-area",object).width(), my:$(".scroll-content",object).height()/$(".scrollbar-area",object).height() }; //保存拖动句柄 this.scrollHandle=$(".scrollbar-handle",object); //设置滑块的尺寸 this.setScrollHandleSize(); //保存拖动句柄的父节点相对页面的偏移,尺寸 this.scrollHandleAreaPos={ top:this.scrollHandle.parent().offset().top, left:this.scrollHandle.parent().offset().left, width:this.scrollHandle.parent().width(), height:this.scrollHandle.parent().height(), maxY:this.scrollHandle.parent().height()-this.scrollHandle.height(), maxX:this.scrollHandle.parent().width()-this.scrollHandle.width() }; //获取滚动时他们之间的滚动关系倍数 this.scrollBeishu={ y:($(".scroll-content",object).height()-this.scrollHandle.parent().height())/(this.scrollHandle.parent().height()-this.scrollHandle.height()), x:($(".scroll-content",object).width()-this.scrollHandle.parent().width())/(this.scrollHandle.parent().width()-this.scrollHandle.width()) }; //初始化鼠标按下时,鼠标相对于滑动句柄的偏移值 this.mouseDownHandlePos={ top:null, left:null }; this.scrollHandle.mousedown(function(e){ var _this=this; //当鼠标按下时,设置鼠标相对于滑动句柄的偏移值 _this_.mouseDownHandlePos={ top:e.pageY-$(this).offset().top, left:e.pageX-$(this).offset().left }; //当鼠标按下的时,就绑定document的鼠标移动事件 $(document).mousemove(function(e){ //当移动的时候清除掉选中文本 if(document.selection&&document.selection.empty){//清楚IE选中文本 document.selection.empty(); }else if(window.getSelection){//清楚FF选中文本 window.getSelection().removeAllRanges(); }; //当鼠标在页面上移动的时候,实时计算出滑块的偏移值 var offset=_this_.getScrollHandleOffset( { top:e.pageY-_this_.scrollHandleAreaPos.top, left:e.pageX-_this_.scrollHandleAreaPos.left }, { top:_this_.mouseDownHandlePos.top, left:_this_.mouseDownHandlePos.left } ); if(_this_.dir=="y"){ _this_.animateScroll(offset.top,_this); }else{ _this_.animateScroll(offset.left,_this); }; }).mouseup(function(){ //当鼠标抬起的时候解绑定 $(this).unbind("mousemove"); }); }).hover(function(){ $(this).addClass("handle-hover"); },function(){ $(this).removeClass("handle-hover"); }); //指定一个默认计数 this.loop=0; //给整个对象绑定滚轮事件 if(window.addEventListener){ this.scrollObject.get(0).addEventListener("DOMMouseScroll",function(e){ e.preventDefault(); _this_.toHandleTopValue(e.detail); },false); this.scrollObject.get(0).addEventListener("mousewheel",function(e){ e.preventDefault(); //为了兼容chrom _this_.toHandleTopValue(e.wheelDelta<0?120:-120); },false); }else{ this.scrollObject.get(0).attachEvent("onmousewheel",function(e){ e.returnValue=false; _this_.toHandleTopValue(e.wheelDelta<0?120:-120); }) ; }; } PZScrollbar.prototype={ //当滚轮滚动的时候驱动滑块的位置 toHandleTopValue:function(e){ //判断鼠标的滚动方向 if(e>0){ this.loop+=20; if(this.dir=="y"){ if(this.loop>=this.scrollHandleAreaPos.maxY){ this.loop=this.scrollHandleAreaPos.maxY; }; }else{ if(this.loop>=this.scrollHandleAreaPos.maxX){ this.loop=this.scrollHandleAreaPos.maxX; }; }; this.animateScroll(this.loop,this.scrollHandle); }else{ this.loop-=20; if(this.loop<=0){this.loop=0;}; this.animateScroll(this.loop,this.scrollHandle); }; }, //驱动滚的区域 animateScroll:function(margin,thisObj){ //在鼠标拖动的时候把偏移值设置给计数器 this.loop=margin; //判断节点传递滚动方向 if(this.dir=="y"){ $(thisObj).css("marginTop",margin+"px"); this.scrollContent.css("marginTop",-margin*this.scrollBeishu.y+"px"); }else{ $(thisObj).css("marginLeft",margin+"px"); this.scrollContent.css("marginLeft",-margin*this.scrollBeishu.x+"px"); }; }, //按照比例设置滑块的尺寸 setScrollHandleSize:function(){ if(this.dir=="y"){ this.scrollHandle.height(this.scrollHandle.parent().height()/this.beishu.my+"px"); }else{ this.scrollHandle.width(this.scrollHandle.parent().width()/this.beishu.mx+"px"); } }, //计算出滑动句柄相对于滑动区域的便宜 getScrollHandleOffset:function(mouse,offset){ var x,y; if(mouse.top-offset.top<=0){ y=0; }else{ y=mouse.top-offset.top }; if(mouse.top-offset.top>=this.scrollHandleAreaPos.maxY){ y=this.scrollHandleAreaPos.maxY; }; if(mouse.left-offset.left<=0){ x=0; }else{ x=mouse.left-offset.left }; if(mouse.left-offset.left>=this.scrollHandleAreaPos.maxX){ x=this.scrollHandleAreaPos.maxX; }; return {top:y,left:x}; } }; PZScrollbar.init=function(scrolls){ var _this=this; scrolls.each(function(){ new _this($(this)); }); }; window["PZScrollbar"]=PZScrollbar; })();
调用方式:
1,首先要链接Jquery库
2,可以自由修改css,来实现需要的效果
3,页面可以出现多个类似的插件
执行创建所有滚动条插件
$(function(){ //初始化页面所以需要滚动条的区域 PZScrollbar.init($(".J_PZScrollbar")); });